@charset "UTF-8"; :root { --gold: #f0b429; --gold-dark: #c8830a; --gold-light: #ffd97d; --bg: #0a0c10; --bg2: #111420; --bg3: #1a1f2e; --bg4: #222840; --border: #2a3050; --border-gold: rgba(240, 180, 41, 0.3); --text: #d4deff; --text-dim: #7888aa; --red: #ff4455; --green: #3dffa0; --blue: #4fa8ff; --purple: #b06aff; /* theme-specific overlay tints (used for hover/active states) */ --ov-hover: rgba(255,255,255,.05); --ov-active: rgba(255,255,255,.10); --ov-subtle: rgba(255,255,255,.03); --panel-bg: rgba(17,20,32,.75); --shadow-panel: rgba(0,0,0,.45); } /* ── Light theme — warm cream palette ── */ [data-theme="light"] { --gold: #a07000; --gold-dark: #7a5200; --gold-light: #c08800; --bg: #f5f0e8; --bg2: #fdfaf5; --bg3: #ece6d8; --bg4: #e0d8c8; --border: #cec5b4; --border-gold: rgba(140, 100, 0, 0.28); --text: #2a2018; --text-dim: #7a6e60; --red: #c42020; --green: #267840; --blue: #2458b8; --purple: #5430a8; --ov-hover: rgba(0,0,0,.05); --ov-active: rgba(0,0,0,.09); --ov-subtle: rgba(0,0,0,.03); --panel-bg: rgba(253,250,245,.92); --shadow-panel: rgba(80,60,40,.14); } * { box-sizing: border-box; margin: 0; padding: 0 } /* Kill stray text caret ("|") globally; re-enable where users need to select text (inputs, data tables, modal bodies, textual content). */ html, body { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } input, textarea, select, table, td, th, .modal-body, .modal-body *, .quiz-q, .quiz-a, .mob-desc, .mob-req, .hd-skill-desc, .hero-skill-desc, .share-url, code, pre, [contenteditable="true"], .selectable, .selectable * { user-select: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; } body { background: var(--bg); color: var(--text); font-family: Arial, sans-serif; font-size: 16px; line-height: 1.55; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } /* Scroll container lives on , NOT . This is critical for the modal-open lock below: if owned overflow-y:scroll while html.modal-open set overflow:hidden, CSS overflow-propagation would stop (html no longer "visible") and would suddenly become its OWN scroll box starting at scrollTop:0 — yanking the page content up by the current scroll distance the instant a modal opens. That produced the chronic, full-viewport `html>body` CLS (~1.0) seen across pages. Keeping overflow on means modal-open locks the same scroller without switching containers; stays in normal flow. */ html { overflow-x: hidden; overflow-y: scroll; scrollbar-gutter: stable; } /* Modal lock: html owns the scroller, so hiding its overflow freezes the page in place with no container switch (see / note above). */ html.modal-open { overflow: hidden } ::-webkit-scrollbar { width: 6px; height: 6px } ::-webkit-scrollbar-track { background: var(--bg2) } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px } ::-webkit-scrollbar-thumb:hover { background: #3a4060 } body::before { content: ''; position: fixed; inset: 0; z-index: 0; background: radial-gradient(ellipse 70% 40% at 50% -5%, rgba(240,180,41,.06) 0%, transparent 65%), radial-gradient(ellipse 40% 30% at 90% 90%, rgba(176,106,255,.04) 0%, transparent 60%); pointer-events: none } .app { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 0 20px 40px } header { text-align: center; padding: 28px 0 18px; border-bottom: 1px solid var(--border-gold); margin-bottom: 24px; position: relative } header::after { content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: 200px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent) } .logo { font-family: Arial, sans-serif; font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 900; background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-dark)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 4px } .subtitle { color: var(--text-dim); font-size: .8rem; letter-spacing: 2.5px; text-transform: uppercase; margin-top: 3px } /* ── Sidebar ── */ .sidebar { position: fixed; left: 0; top: 0; width: 210px; height: 100vh; background: var(--bg2); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 100; overflow: hidden } .sidebar-brand { display: block; padding: 14px 16px; border-bottom: 1px solid var(--border); flex: 0 0 auto; text-decoration: none; color: inherit; cursor: pointer; transition: background .15s } .sidebar-brand:hover { background: var(--ov-hover) } .sidebar-brand:hover .logo { color: var(--gold) } .mobile-topbar .logo { text-decoration: none; color: inherit; cursor: pointer; transition: color .15s } .mobile-topbar .logo:hover { color: var(--gold) } .sidebar-brand .logo { font-size: .95rem; letter-spacing: 2.5px; line-height: 1.3 } .sidebar-brand .subtitle { font-size: .62rem !important; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 5px !important; opacity: .6; line-height: 1.5 } .sidebar-footer { padding: 14px 16px; border-top: 1px solid var(--border); flex: 0 0 auto; background: var(--bg2) } /* Contact icons row (sidebar footer) — compact 3-icon row instead of full text links to save vertical space. Hover tooltip via title attr gives users the full handle when needed. */ .contact-row { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 4px } .contact-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ov-subtle); border: 1px solid transparent; color: var(--text-dim); text-decoration: none; transition: transform .15s, color .15s, background .15s, border-color .15s; } .contact-icon:hover { transform: translateY(-2px) } .contact-icon.tg:hover { color: #29b6f6; background: rgba(41,182,246,.12); border-color: rgba(41,182,246,.35) } .contact-icon.dc:hover { color: #8b9bfa; background: rgba(139,155,250,.12); border-color: rgba(139,155,250,.35) } .contact-icon.em:hover { color: var(--gold); background: rgba(240,180,41,.12); border-color: rgba(240,180,41,.35) } .main-wrap { margin-left: 210px; min-height: 100vh; display: flex; flex-direction: column } .main-wrap .app { max-width: none; margin: 0; } /* ── Tabs (sidebar nav) ── */ .tabs { display: flex; flex-direction: column; background: transparent; border: none; padding: 10px 0; margin-bottom: 0; width: 100%; /* Take all remaining vertical space between brand & footer; scroll internally so the donate button + contacts in .sidebar-footer stay pinned in view at all viewport heights. */ flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--border) transparent } .tabs::-webkit-scrollbar { width: 6px } .tabs::-webkit-scrollbar-track { background: transparent } .tabs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px } .tabs::-webkit-scrollbar-thumb:hover { background: var(--text-dim) } .tab-btn { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border: none; border-left: 3px solid transparent; border-radius: 0; background: transparent; color: var(--text-dim); font-family: Arial, sans-serif; font-size: .95rem; font-weight: 600; cursor: pointer; transition: color .15s, background .15s, border-color .15s; white-space: nowrap; text-decoration: none; width: 100%; text-align: left } .tab-btn:hover { color: var(--text); background: var(--ov-hover); border-left-color: var(--border) } .tab-btn.active { color: var(--tab-accent, var(--gold)); background: var(--ov-active); border-left-color: var(--tab-accent, var(--gold)); font-weight: 700; box-shadow: inset 0 0 20px var(--ov-subtle) } /* ── Tab SVG icon (mask-based, inherits text color) ── */ .tab-icon { flex-shrink: 0; display: inline-block; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: var(--ti) center / contain no-repeat; mask: var(--ti) center / contain no-repeat; opacity: .78; transition: opacity .15s, transform .15s; } .tab-btn:hover .tab-icon { opacity: 1 } .tab-btn.active .tab-icon { opacity: 1; transform: scale(1.05) } .tab-label { flex: 1; min-width: 0 } /* ── Collapsible tab group (gamedata parent) ── */ .tab-btn-group { display: flex; align-items: stretch; width: 100%; } .tab-btn-group .tab-btn { border-right: none; border-radius: 0; } .tab-collapse-btn { flex-shrink: 0; width: 32px; background: transparent; border: none; color: var(--text-dim); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; transition: color .15s, background .15s; } .tab-collapse-btn span, .tab-collapse-btn { transition: color .15s, background .15s; } .tab-collapse-btn > * { display: inline-block; } .tab-collapse-btn::after { content: '›'; font-size: 1.4rem; font-weight: 300; display: inline-block; transform: rotate(0deg); transition: transform .2s ease; } .tab-collapse-btn.open::after { transform: rotate(90deg); } .tab-collapse-btn:hover { color: var(--text); background: var(--ov-hover); } /* ── Sub-tabs (children of a main tab, shown indented in sidebar) ── */ .tab-sub-btn { display: flex; align-items: center; padding: 7px 14px 7px 32px; font-size: .86rem; color: var(--text-dim); background: transparent; border: none; border-left: 2px solid transparent; cursor: pointer; text-align: left; width: 100%; letter-spacing: .3px; transition: color .15s, background .15s, border-color .15s; font-weight: bold; } .tab-sub-btn:hover { color: var(--text); background: var(--ov-hover); border-left-color: var(--border); } .tab-sub-btn.active { color: var(--tab-accent, var(--gold)); background: var(--ov-active); border-left-color: var(--tab-accent, var(--gold)); font-weight: 600; } /* ── Hamburger button (desktop: hidden) ── */ .menu-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 36px; height: 36px; background: transparent; border: 1px solid var(--border); border-radius: 7px; cursor: pointer; padding: 0; flex-shrink: 0; transition: border-color .2s; touch-action: manipulation } .menu-toggle:hover { border-color: var(--gold) } .menu-toggle span { display: block; width: 17px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s ease, opacity .2s ease } .menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg) } .menu-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0) } .menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) } /* ── Mobile top bar (desktop: hidden) ── */ .mobile-topbar { display: none; position: sticky; top: 0; z-index: 190; background: var(--bg2); border-bottom: 1px solid var(--border); height: 54px; align-items: center; padding: 0 16px; gap: 12px } .mobile-topbar .logo { font-size: .85rem; letter-spacing: 2.5px } /* ── Nav drawer backdrop ── */ .nav-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 195; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s, visibility .22s } .nav-overlay.open { opacity: 1; visibility: visible; pointer-events: auto } /* ── Tablet (≤ 1100px) ── */ @media (max-width: 1100px) { .search-input { width: 170px !important } } /* ── Mobile nav (≤ 768px) ── */ @media (max-width: 768px) { /* Show mobile top bar & hamburger */ .mobile-topbar { display: flex } .menu-toggle { display: flex } /* Sidebar → left drawer */ .sidebar { position: fixed; left: 0; top: 0; width: 240px; height: 100vh; transform: translateX(-240px); transition: transform .28s cubic-bezier(.4, 0, .2, 1); flex-direction: column; z-index: 200; overflow: hidden; box-shadow: none; will-change: transform } .sidebar.menu-open { transform: translateX(0); box-shadow: 6px 0 32px rgba(0, 0, 0, .6) } /* Restore full sidebar style inside drawer */ .sidebar-brand { padding: 14px 16px; border-bottom: 1px solid var(--border) } .sidebar-brand .logo { font-size: .92rem; letter-spacing: 2.5px } .sidebar-footer { display: block } .tabs { flex-direction: column; padding: 10px 0; width: 100%; overflow-x: hidden } .tab-btn { border-left: 3px solid transparent; border-bottom: none; width: 100%; padding: 13px 20px; font-size: .95rem; height: auto; display: flex; align-items: center } .tab-btn:hover { border-left-color: rgba(255,255,255,.15); border-bottom-color: transparent } .tab-btn.active { border-left-color: var(--tab-accent, var(--gold)); border-bottom: none } .main-wrap { margin-left: 0 } /* Layout */ .app { padding: 0 12px 28px } .panel { padding: 14px 16px; border-radius: 12px; margin-bottom: 14px } .panel-title { font-size: .88rem } /* Server grid: 2 columns */ .server-grid { grid-template-columns: repeat(2, 1fr); gap: 8px } .server-card { padding: 10px 12px } .server-num { font-size: 1.1rem } /* Stat cards: 2 per row */ .stats-row { gap: 8px } .stat-card { flex: 1 1 calc(50% - 4px); min-width: 0 } .stat-val { font-size: 1.1rem } /* Charts: single column */ .charts-row { grid-template-columns: 1fr; gap: 10px } /* Compare summary cards: 2 col */ .cmp-grid { grid-template-columns: 1fr 1fr; gap: 8px } /* Search bar takes full row on mobile */ .search-wrap { flex: 1 1 100%; min-width: 0; order: -1 } .search-input, #serverSearchInput { width: 100% !important } /* Picker dropdown opens leftward on mobile (prevent overflow) */ .cpdrop { right: auto; left: 0 } /* Unfreeze left columns on mobile — not enough screen width */ .col-freeze { position: static !important; background: transparent !important; z-index: auto !important; } thead th.col-freeze { position: sticky !important; top: 0 !important; left: auto !important; background: var(--bg3) !important; z-index: 2 !important; } /* Mobile: body col-freeze are static (above), so the right-edge shadow only lands on the sticky header. Drop the transition + shadow during horizontal pan — these were the main paint cost on mobile. */ .col-freeze-last { transition: none !important } .tbl-scrolled .col-freeze-last { box-shadow: none !important } /* Hide the JS-synced fake scrollbar on mobile — native bar + momentum is already there, and we no longer mount it (see initStickyHScroll). */ .sticky-hscroll { display: none !important } /* Modals */ /* Full-screen backdrop-filter blur(5px) is a very expensive composite on mobile GPUs and delays the open paint (hurts modal-open INP, e.g. #heroDetailModal). Keep the dark scrim, drop the blur on mobile. */ .modal-overlay { padding: 10px; backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(0,0,0,.82) } .modal { border-radius: 10px; max-height: 92vh } .modal-body { padding: 14px 16px 18px } .modal-header { padding: 14px 16px 12px } } .panel { background: var(--panel-bg); border: 1px solid var(--border); border-radius: 18px; padding: 24px 28px; margin-bottom: 20px; backdrop-filter: blur(4px); transition: box-shadow .3s } .panel:hover { box-shadow: 0 8px 24px var(--shadow-panel) } .panel-title { font-family: Arial, sans-serif; font-size: .95rem; color: var(--gold); letter-spacing: 2px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px } .panel-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border-gold), transparent) } .btn { padding: 8px 20px; border: 1px solid transparent; border-radius: 8px; font-family: Arial, sans-serif; font-size: .9rem; font-weight: 600; cursor: pointer; transition: all .2s; letter-spacing: 0 } .btn-primary { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: #1c1917; border: none } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 18px rgba(251, 191, 36, .35) } .btn-danger { background: rgba(255, 68, 85, .12); color: var(--red); border-color: rgba(255, 68, 85, .3) } .btn-danger:hover { background: rgba(255, 68, 85, .22) } .btn-ghost { background: var(--bg3); color: var(--text); border-color: var(--border) } .btn-ghost:hover { border-color: var(--gold); color: var(--gold) } textarea, input[type=text], input[type=password], input[type=email], select { width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: Arial, sans-serif; font-size: .92rem; padding: 9px 12px; outline: none; transition: border-color .2s } textarea { resize: vertical; min-height: 170px } textarea:focus, input:focus { border-color: var(--gold) } select { cursor: pointer } select option { background: var(--bg3) } .status { padding: 9px 14px; border-radius: 8px; font-weight: 600; margin-top: 10px; font-size: .9rem; display: none } .status.show { display: block } .status.success { background: rgba(61, 255, 160, .1); color: var(--green); border: 1px solid rgba(61, 255, 160, .2) } .status.error { background: rgba(255, 68, 85, .1); color: var(--red); border: 1px solid rgba(255, 68, 85, .2) } .status.info { background: rgba(79, 168, 255, .1); color: var(--blue); border: 1px solid rgba(79, 168, 255, .2) } .server-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px } .server-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 13px 15px; cursor: pointer; transition: all .2s; position: relative; overflow: hidden } .server-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--gold), transparent); opacity: 0; transition: opacity .2s } .server-card:hover, .server-card.active { border-color: var(--border-gold); background: var(--bg4); box-shadow: 0 0 18px rgba(240, 180, 41, .1) } .server-card:hover::before, .server-card.active::before { opacity: 1 } .server-card.server-home { border-color: rgba(240, 180, 41, .5); box-shadow: 0 0 14px rgba(240, 180, 41, .12), inset 0 0 20px rgba(240, 180, 41, .04) } .server-card.server-home .server-num { color: var(--gold) } .server-num { font-family: Arial, sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--gold) } .server-sub { font-size: .76rem; color: var(--text-dim); margin-top: 2px } .server-days { font-size: .74rem; color: var(--blue); margin-top: 5px } .server-ally-tag { display: inline-block; font-size: .68rem; font-family: Arial, sans-serif; font-weight: 700; color: var(--gold); background: rgba(240, 180, 41, .12); border: 1px solid rgba(240, 180, 41, .3); border-radius: 4px; padding: 1px 7px; margin-top: 3px; letter-spacing: 1px } .date-list { display: flex; gap: 7px; flex-wrap: wrap } .chip { padding: 5px 13px; background: var(--bg3); border: 1px solid var(--border); border-radius: 20px; font-size: .83rem; cursor: pointer; transition: all .2s; color: var(--text-dim); display: flex; align-items: center; gap: 5px } .chip:hover { border-color: var(--gold); color: var(--gold) } .chip.active { background: rgba(240, 180, 41, .15); border-color: var(--gold); color: var(--gold) } .chip-del { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 11px; padding: 0 2px; line-height: 1 } .chip-del:hover { color: var(--red) } .chip-edit-inline { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 2px 5px; font-size: .78rem; line-height: 1; margin-left: 2px; border-radius: 4px; transition: color .15s, background .15s; opacity: .55; } .chip-edit-inline:hover { color: var(--gold); background: rgba(240, 180, 41, .12); opacity: 1; } .chip-editing { background: rgba(240, 180, 41, .1) !important; border: 1px solid var(--gold) !important; padding: 2px 6px !important; } .chip-input { background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; color: var(--text); padding: 3px 7px; font-size: .82rem; outline: none; font-family: inherit; } .chip-input:focus { border-color: var(--gold) } .chip-confirm, .chip-cancel { background: none; border: none; cursor: pointer; padding: 2px 5px; font-size: .8rem; line-height: 1; border-radius: 3px; font-weight: 700; } .chip-confirm { color: var(--green) } .chip-confirm:hover { background: rgba(61, 255, 160, .15) } .chip-cancel { color: var(--text-dim) } .chip-cancel:hover { color: var(--red); background: rgba(255, 68, 85, .12) } .stats-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px } .stat-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 13px 15px; flex: 1 1 140px; position: relative } .stat-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; border-radius: 0 0 10px 10px; background: var(--accent, var(--gold)); opacity: .5 } .stat-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim) } .stat-val { font-family: Arial, sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--accent, var(--gold)); margin-top: 3px } .stat-sub { font-size: .78rem; color: var(--text-dim); margin-top: 2px } .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; cursor: default; } .table-wrap::-webkit-scrollbar { height: 8px } .table-wrap::-webkit-scrollbar-track { background: var(--bg3) } .table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px } .table-wrap::-webkit-scrollbar-thumb:hover { background: var(--text-dim) } /* Sticky table header */ .table-wrap thead th { position: sticky; top: 0; z-index: 2; background: var(--bg3); contain: paint; } /* Freeze left columns (like Excel) */ .col-freeze { position: sticky; z-index: 1; background: var(--bg2); contain: paint; } thead th.col-freeze { z-index: 3; background: var(--bg3); } /* Sticky horizontal scrollbar floating at bottom of viewport */ .sticky-hscroll { position: sticky; bottom: 0; overflow-x: auto; height: 14px; background: var(--bg2); border-top: 1px solid var(--border); z-index: 50; display: none } .sticky-hscroll > div { height: 1px } table { width: 100%; border-collapse: collapse; font-size: .92rem } thead tr { background: var(--bg3); border-bottom: 1px solid rgba(240, 180, 41, 0.25) } th { padding: 12px 14px; text-align: center; font-family: Arial, sans-serif; font-weight: 600; font-size: .78rem; letter-spacing: .3px; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; cursor: pointer; user-select: none; transition: color .2s } th:hover { color: var(--gold) } th.sorted { color: var(--gold) } th.left { text-align: left } th.nosort { cursor: default } th.nosort:hover { color: var(--text-dim) } tbody tr { border-bottom: 1px solid rgba(42, 48, 80, 0.5); transition: background .15s } tbody tr:last-child { border-bottom: none } tbody tr:hover { background: rgba(251, 191, 36, .05) } td { padding: 11px 14px; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; /* Ẩn caret nhấp nháy khi click vào ô — vẫn cho select + copy bình thường */ caret-color: transparent; } td.left { text-align: left } td.rank { font-family: Arial, sans-serif; font-weight: 700; color: var(--text-dim) } td.rank.r1 { color: #ffd700 } td.rank.r2 { color: #c0c0c0 } td.rank.r3 { color: #cd7f32 } td.name { font-weight: 600; color: var(--gold-light); cursor: pointer } td.name:hover { color: var(--gold); text-decoration: underline } td.ally { color: var(--blue); font-weight: 600; font-size: .81rem } td.rate { color: var(--purple) } td.id-click { color: var(--blue); cursor: pointer; font-weight: 700 } td.id-click:hover { color: var(--gold); text-decoration: underline } .pos { color: var(--green) } .neg { color: var(--red) } .hl { background: rgba(240, 180, 41, .28); border-radius: 2px; color: var(--gold); font-weight: 700 } .no-results td { text-align: center; color: var(--text-dim); padding: 30px; font-size: .92rem } .count-badge { font-size: .78rem; color: var(--text-dim); font-family: Arial, sans-serif; font-weight: 500; padding: 3px 10px; background: var(--bg3); border: 1px solid var(--border); border-radius: 20px; white-space: nowrap } .count-badge b { color: var(--gold) } .count-badge.on { border-color: var(--border-gold); color: var(--text) } .search-wrap { position: relative } .search-input { width: 220px !important; padding: 7px 34px 7px 12px !important; font-size: .88rem !important } .search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 14px; padding: 2px 5px; line-height: 1; display: none; border-radius: 4px } .search-clear:hover { color: var(--red); background: rgba(255, 68, 85, .1) } .search-clear.show { display: block } .cmp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-top: 12px } .cmp-card { background: var(--bg3); border: 1px solid var(--border); border-top-width: 2px; border-radius: 10px; padding: 13px 15px } .cmp-title { font-family: Arial, sans-serif; font-size: .82rem; color: var(--gold); margin-bottom: 9px } .cmp-row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid rgba(42, 48, 80, .35); font-size: .86rem } .cmp-row:last-child { border-bottom: none } .cmp-key { color: var(--text-dim) } .cmp-val { font-weight: 700 } .metric-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px } .metric-tab { padding: 5px 14px; border: 1px solid var(--border); border-radius: 20px; background: var(--bg3); color: var(--text-dim); font-family: Arial, sans-serif; font-size: .82rem; font-weight: 500; cursor: pointer; transition: all .2s; letter-spacing: 0; white-space: nowrap } .metric-tab:hover { border-color: var(--gold); color: var(--gold) } .metric-tab.active { background: rgba(240, 180, 41, .15); border-color: var(--gold); color: var(--gold) } /* ─── Column Picker ─── */ .cpw { position: relative; display: inline-block } .cpbtn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; color: var(--text-dim); font-family: Arial, sans-serif; font-size: .82rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all .18s } .cpbtn:hover, .cpbtn.active { border-color: var(--border-gold); color: var(--gold) } .cpdrop { position: absolute; top: calc(100% + 6px); right: 0; background: var(--bg2); border: 1px solid var(--border-gold); border-radius: 10px; z-index: 500; min-width: 185px; box-shadow: 0 10px 40px rgba(0, 0, 0, .65); display: none; padding: 4px 0 8px } .cpdrop.open { display: block } .cpactions { display: flex; gap: 10px; padding: 6px 14px 5px; font-size: .75rem; border-bottom: 1px solid var(--border); margin-bottom: 3px } .cpactions a { color: var(--text-dim); cursor: pointer } .cpactions a:hover { color: var(--gold) } .cpgroup-label { padding: 5px 14px 2px; font-size: .72rem; letter-spacing: .5px; color: var(--text-dim); text-transform: uppercase } .cpsep { height: 1px; background: var(--border); margin: 5px 10px } .cpitem { display: flex; align-items: center; gap: 8px; padding: 5px 14px; cursor: pointer } .cpitem:hover { background: rgba(240, 180, 41, .05) } .cpitem input { accent-color: var(--gold); width: 14px; height: 14px; cursor: pointer; flex-shrink: 0 } .cpitem label { font-size: .86rem; color: var(--text); cursor: pointer; user-select: none } .cpitem.disabled { opacity: .45; cursor: default } .cpitem.disabled input { cursor: default } .cpitem.disabled label { cursor: default } /* Modal */ .modal-overlay { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .78); backdrop-filter: blur(5px); align-items: center; justify-content: center; padding: 16px } .modal-overlay.open { display: flex } .modal { background: var(--bg2); border: 1px solid var(--border-gold); border-radius: 14px; width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; box-shadow: 0 20px 80px rgba(0, 0, 0, .7); animation: mIn .2s ease } .modal-wide { max-width: 820px } @keyframes mIn { from { opacity: 0; transform: scale(.95) translateY(8px) } to { opacity: 1; transform: scale(1) translateY(0) } } .modal-header { padding: 18px 22px 14px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-start; gap: 12px } .modal-body { padding: 16px 22px 22px } .detail-sec { margin-bottom: 16px } .detail-sec-title { font-size: .7rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-dim); padding-bottom: 6px; border-bottom: 1px solid var(--border); margin-bottom: 8px } .detail-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid rgba(42, 48, 80, .35); font-size: .9rem; gap: 8px } .detail-row:last-child { border-bottom: none } .detail-key { color: var(--text-dim); flex-shrink: 0 } .detail-val { font-weight: 700; text-align: right } /* ── Drawer (slide-in from right) ── */ .drawer-overlay { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); } .drawer-overlay.open { display: block } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); background: var(--bg2); border-left: 1px solid var(--border-gold); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); box-shadow: -24px 0 80px rgba(0,0,0,.65); z-index: 1001; } .drawer-overlay.open .drawer { transform: translateX(0) } .drawer-header { padding: 16px 20px 12px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-start; flex-shrink: 0; gap: 12px; } /* Small copy button next to Name / ID in the drawer header */ .copy-mini-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 6px; padding: 0; background: rgba(255,255,255,.06); border: 1px solid var(--border); border-radius: 6px; color: var(--text-dim); font-size: .78rem; line-height: 1; cursor: pointer; vertical-align: middle; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease; } .copy-mini-btn:hover { background: rgba(240,180,41,.12); color: var(--gold); border-color: rgba(240,180,41,.4); } .copy-mini-btn:active { transform: scale(.92); } .copy-mini-btn.copied { background: rgba(74,222,128,.15); color: var(--green); border-color: rgba(74,222,128,.45); } :root[data-theme="light"] .copy-mini-btn { background: rgba(0,0,0,.04); } :root[data-theme="light"] .copy-mini-btn:hover { background: rgba(240,180,41,.18); } .drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px 28px; scroll-behavior: smooth; } .drawer-qs-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-bottom: 16px; } .drawer-qs-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; border-top: 2px solid var(--dqc-accent, var(--gold)); } .drawer-qs-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .8px; color: var(--text-dim); margin-bottom: 3px; } .drawer-qs-val { font-size: 1rem; font-weight: 700; color: var(--text); line-height: 1.2; } .drawer-sec { font-size: .65rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-dim); padding-bottom: 5px; border-bottom: 1px solid var(--border); margin: 16px 0 8px; } .drawer-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(42,48,80,.2); font-size: .87rem; gap: 8px; } .drawer-row:last-child { border-bottom: none } .drawer-row-k { color: var(--text-dim); flex-shrink: 0 } .drawer-row-v { font-weight: 600; text-align: right } /* Diff table inside drawer */ .diff-tbl { width: 100%; border-collapse: collapse; font-size: .83rem } .diff-tbl th { padding: 5px 8px; text-align: right; font-size: .65rem; letter-spacing: .8px; text-transform: uppercase; color: var(--text-dim); border-bottom: 1px solid var(--border); } .diff-tbl th:first-child { text-align: left } .diff-tbl td { padding: 5px 8px; text-align: right; border-bottom: 1px solid rgba(42,48,80,.15); font-variant-numeric: tabular-nums; } .diff-tbl td:first-child { text-align: left; color: var(--text-dim) } .diff-tbl tr:last-child td { border-bottom: none } .dpos { color: var(--green); font-weight: 700 } .dneg { color: var(--red); font-weight: 700 } .dzero { color: var(--text-dim) } /* Clickable rows in both tabs */ .clickable-row { cursor: pointer; transition: background .12s } .clickable-row:hover { background: rgba(240,180,41,.05) } /* ── Theme Toggle Pill ── */ .theme-toggle-wrap { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 10px; } .tt-label { font-size: .68rem; color: var(--text-dim); transition: color .3s ease; user-select: none; letter-spacing: .2px; } [data-theme="dark"] .tt-label-dark { color: var(--gold); font-weight: 600; } [data-theme="light"] .tt-label-light { color: #c07800; font-weight: 600; } .theme-toggle { position: relative; width: 58px; height: 28px; border-radius: 14px; background: linear-gradient(135deg, #12183a, #1e2650 55%, #0d1228); box-shadow: 0 0 0 1.5px rgba(255,255,255,.07), inset 0 1px 4px rgba(0,0,0,.55); cursor: pointer; overflow: hidden; flex-shrink: 0; transition: background .5s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, transform .12s ease; -webkit-tap-highlight-color: transparent; } [data-theme="light"] .theme-toggle { background: linear-gradient(135deg, #4ab8f7, #7dd3f8 55%, #aae4ff); box-shadow: 0 0 0 1.5px rgba(0,100,200,.12), inset 0 1px 4px rgba(0,0,0,.1); } .theme-toggle:active { transform: scale(.92); } /* Stars (visible dark mode) */ .tt-star { position: absolute; border-radius: 50%; background: #fff; transition: opacity .4s ease; pointer-events: none; } .tt-s1 { width: 2px; height: 2px; top: 7px; left: 36px; animation: ttTwinkle 2.1s ease-in-out infinite; } .tt-s2 { width: 1.5px; height: 1.5px; top: 17px; left: 46px; animation: ttTwinkle 1.7s .4s ease-in-out infinite; } .tt-s3 { width: 2.5px; height: 2.5px; top: 9px; left: 52px; animation: ttTwinkle 2.5s .8s ease-in-out infinite; } [data-theme="light"] .tt-s1, [data-theme="light"] .tt-s2, [data-theme="light"] .tt-s3 { opacity: 0; animation: none; } @keyframes ttTwinkle { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .2; transform: scale(.45); } } /* Cloud (visible light mode) */ .tt-cloud { position: absolute; top: 50%; left: 8px; width: 14px; height: 6px; background: rgba(255,255,255,.92); border-radius: 3px; opacity: 0; transform: translateY(-50%) translateX(-6px); transition: opacity .35s .08s ease, transform .42s ease; pointer-events: none; } .tt-cloud::before { content: ''; position: absolute; width: 8px; height: 8px; background: rgba(255,255,255,.92); border-radius: 50%; top: -4px; left: 2px; } .tt-cloud::after { content: ''; position: absolute; width: 6px; height: 6px; background: rgba(255,255,255,.92); border-radius: 50%; top: -3px; left: 7px; } [data-theme="light"] .tt-cloud { opacity: 1; transform: translateY(-50%) translateX(0); } /* Thumb */ .tt-thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(145deg, #ddd8c8, #f0ead8); box-shadow: 0 1px 5px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; transition: transform .48s cubic-bezier(.34,1.56,.64,1), background .4s ease, box-shadow .4s ease; will-change: transform; pointer-events: none; } [data-theme="light"] .tt-thumb { transform: translateX(30px); background: linear-gradient(145deg, #ffe44d, #ffbb00); box-shadow: 0 1px 5px rgba(0,0,0,.22), 0 0 12px rgba(255,185,0,.6), 0 0 0 1px rgba(255,210,50,.28); } /* Moon SVG */ .tt-moon { position: absolute; width: 12px; height: 12px; fill: #b89e52; overflow: visible; transition: opacity .22s ease, transform .3s ease; } [data-theme="light"] .tt-moon { opacity: 0; transform: scale(0) rotate(-70deg); } /* Sun SVG */ .tt-sun { position: absolute; width: 13px; height: 13px; overflow: visible; transition: opacity .22s .08s ease, transform .3s .04s ease; opacity: 0; transform: scale(0) rotate(70deg); } .tt-sun circle { fill: rgba(255,255,255,.95); } .tt-sun path { stroke: rgba(255,255,255,.9); stroke-width: 1.5; stroke-linecap: round; fill: none; } [data-theme="light"] .tt-sun { opacity: 1; transform: scale(1) rotate(0deg); } /* Light theme — body glow adjustment */ [data-theme="light"] body::before { background: radial-gradient(ellipse 70% 40% at 50% -5%, rgba(160,120,0,.06) 0%, transparent 65%), radial-gradient(ellipse 40% 30% at 90% 90%, rgba(80,60,180,.04) 0%, transparent 60%); } /* Light theme — freeze shadow softer */ [data-theme="light"] .tbl-scrolled .col-freeze-last { box-shadow: 6px 0 12px -2px rgba(100,110,160,.3); } /* Freeze column right-edge shadow — visible only when table is scrolled */ .col-freeze-last { transition: box-shadow .15s } .tbl-scrolled .col-freeze-last { box-shadow: 6px 0 12px -2px rgba(0,0,0,.65); } /* Bigger, more visible sticky scrollbar */ .sticky-hscroll { height: 16px !important; border-radius: 0 0 12px 12px; background: var(--bg3) !important; border-top: 1px solid var(--border) !important; cursor: ew-resize; } .sticky-hscroll::-webkit-scrollbar { height: 10px } .sticky-hscroll::-webkit-scrollbar-track { background: var(--bg3) } .sticky-hscroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px } .sticky-hscroll::-webkit-scrollbar-thumb:hover { background: var(--text-dim) } /* Excel-style group headers */ .grp-hdr { background: rgba(30,36,60,.9); text-align: center !important; font-size: .62rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-dim); padding: 4px 6px !important; border-bottom: 1px solid var(--border); white-space: nowrap; } .grp-hdr.g-imm { border-top: 2px solid var(--cyan, #26c6da) } .grp-hdr.g-battle { border-top: 2px solid var(--red) } .grp-hdr.g-new { border-top: 2px solid var(--gold) } .grp-hdr.g-pvp { border-top: 2px solid var(--purple) } .grp-hdr.g-gather { border-top: 2px solid var(--green) } .grp-hdr.g-act { border-top: 2px solid var(--blue) } thead tr.grp-row th { vertical-align: middle } @media (max-width: 600px) { .drawer { width: 100vw } .drawer-qs-grid { grid-template-columns: repeat(2,1fr) } /* Full-screen backdrop-filter blur is a very expensive composite on mobile GPUs and delays the next paint when the drawer opens (hurts tap INP). Keep the dark scrim, drop the blur on small screens. */ .drawer-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(0,0,0,.62) } } .flex-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap } /* ── Ranking / table toolbar ── */ .tbar { padding: 14px 18px 10px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px } .tbar-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap } .tbar-controls .search-wrap { flex: 1; min-width: 130px } .tbar-controls .search-input { width: 100% !important } @media (max-width: 680px) { .tbar { flex-direction: column; align-items: flex-start; padding: 12px 14px 10px } .tbar-controls { width: 100% } } .section-label { font-size: .71rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-dim); margin-bottom: 10px } .empty { text-align: center; padding: 40px; color: var(--text-dim) } .charts-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px } .chart-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; min-width: 0 } .chart-title { font-family: Arial, sans-serif; font-size: .95rem; font-weight: 700; color: var(--gold); letter-spacing: .3px; margin-bottom: 12px } @media(max-width:900px) { .charts-row { grid-template-columns: 1fr 1fr } } @media(max-width:640px) { .charts-row { grid-template-columns: 1fr; gap: 8px } } .saving-badge { font-size: .75rem; color: var(--text-dim) } .manage-server { margin-bottom: 14px; padding: 16px; background: var(--bg3); border: 1px solid var(--border); border-radius: 10px } .auth-field { margin-bottom: 12px } .auth-label { font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); margin-bottom: 5px } ::-webkit-scrollbar { width: 5px; height: 5px } ::-webkit-scrollbar-track { background: var(--bg2) } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px } /* ── Small phones (≤ 480px) ── */ @media (max-width: 480px) { .mobile-topbar { height: 50px; padding: 0 12px } .mobile-topbar .logo { font-size: .78rem; letter-spacing: 2px } .app { padding: 0 10px 24px } .panel { padding: 12px 12px; border-radius: 10px; margin-bottom: 12px } .stat-card { flex: 1 1 100% } .cmp-grid { grid-template-columns: 1fr } .btn { padding: 7px 12px; font-size: .84rem } .flex-row { gap: 6px } } /* ── Tìm Lãnh Chúa ── */ .lord-search-panel { margin-bottom: 0 } .lord-search-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 16px } .lord-search-field { position: relative; flex: 1; min-width: 0; display: flex; align-items: center } /* width:100% (not auto) — auto resolves to the input's intrinsic 20-char width (~170px), which made the field collapse on mobile. */ .lord-search-field .search-input { flex: 1; padding-right: 36px; min-width: 0; width: 100% !important } .lord-search-field .search-clear { position: absolute; right: 8px; background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: .95rem; padding: 4px 6px; opacity: 0; pointer-events: none; transition: opacity .15s } .lord-search-field .search-clear.show { opacity: 1; pointer-events: auto } .lord-hint { text-align: center; color: var(--text-dim); font-size: .9rem; padding: 20px 0 } .lord-recent { margin-top: 12px } .lord-recent-label { font-size: .8rem; color: var(--text-dim); margin-bottom: 8px } .lord-recent-chips { display: flex; flex-wrap: wrap; gap: 6px } .lord-recent-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 10px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: .82rem; color: var(--text); transition: border-color .15s, background .15s } .lord-recent-chip:hover { border-color: var(--gold, #f0b429); background: var(--bg2) } .lord-recent-chip b { color: var(--gold-light, #ffd866) } .lord-recent-chip span { font-size: .72rem; color: var(--text-dim) } .lord-result-count { font-size: .78rem; color: var(--text-dim); margin-bottom: 10px } .lord-results { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto } .lord-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; cursor: pointer; transition: border-color .15s, background .15s } .lord-card:hover { border-color: #ff7eb6; background: rgba(255,126,182,.06) } .lord-card.active { border-color: #ff7eb6; background: rgba(255,126,182,.1) } .lord-card-name { font-weight: 700; font-size: .95rem; color: var(--text); margin-bottom: 4px } .lord-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 5px } .lord-card-tag { font-size: .75rem; color: var(--text-dim); background: var(--bg4); border-radius: 4px; padding: 2px 7px } .lord-card-stats { display: flex; gap: 16px; font-size: .8rem; color: var(--text-dim) } .lord-card-stats b { color: var(--text) } .lord-profile-panel { margin-top: 0 } .lord-profile-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border) } .lord-profile-name { font-size: 1.1rem; font-weight: 700; color: #ff7eb6; margin-bottom: 4px } .lord-profile-sub { font-size: .8rem; color: var(--text-dim) } .lord-profile-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px } .lord-date-row { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 16px; flex-wrap: wrap } .lord-date-arrow { color: var(--text-dim); font-size: 1.1rem; padding-bottom: 6px } .lord-diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px } @media (max-width: 900px) { .lord-profile-body { grid-template-columns: 1fr 1fr } .lord-diff-grid { grid-template-columns: 1fr 1fr } } @media (max-width: 600px) { .lord-profile-body { grid-template-columns: 1fr } .lord-diff-grid { grid-template-columns: 1fr } .lord-date-row { gap: 8px } } /* ── Quiz / Câu đố ── */ .quiz-search-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 18px } .quiz-search-wrap input { flex: 1; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: .92rem; padding: 9px 14px; outline: none; transition: border-color .2s } .quiz-search-wrap input:focus { border-color: var(--blue) } .quiz-search-clear { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 1rem; padding: 4px 8px; border-radius: 6px; flex-shrink: 0; line-height: 1; opacity: 0; pointer-events: none; transition: opacity .15s, color .15s } .quiz-search-clear.show { opacity: 1; pointer-events: auto } .quiz-search-clear:hover { color: var(--text) } .quiz-count { font-size: .8rem; color: var(--text-dim); white-space: nowrap } .quiz-list { display: flex; flex-direction: column; gap: 8px } .quiz-item { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; display: grid; grid-template-columns: 38px 1fr; gap: 4px 10px; align-items: start; transition: border-color .15s } .quiz-item:hover { border-color: var(--border-gold) } .quiz-item-noid { grid-template-columns: 1fr } .quiz-num { font-size: .75rem; font-weight: 700; color: var(--text-dim); background: var(--bg4); border-radius: 5px; text-align: center; padding: 3px 0; grid-row: span 2; align-self: start; margin-top: 2px } .quiz-q { font-size: .9rem; color: var(--text); line-height: 1.45 } .quiz-a { font-size: .88rem; color: var(--gold); font-weight: 600; margin-top: 3px } .quiz-a::before { content: '→ '; opacity: .6 } .quiz-hl { background: rgba(240,180,41,.28); border-radius: 3px; padding: 0 2px } .quiz-empty { text-align: center; padding: 48px 24px; color: var(--text-dim); font-size: .92rem } /* ── Mobilize (Huy động liên minh) ── */ .mobilize-tier-bar { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap } .mobilize-tier-btn { flex: 1; min-width: 70px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; color: var(--text-dim); padding: 9px 14px; font-size: .88rem; font-weight: 600; cursor: pointer; transition: all .15s } .mobilize-tier-btn:hover { color: var(--text); border-color: var(--border-gold) } .mobilize-tier-btn.active { background: linear-gradient(135deg, rgba(240,180,41,.18), rgba(240,180,41,.04)); border-color: var(--gold); color: var(--gold); box-shadow: 0 0 12px rgba(240,180,41,.15) } .mobilize-rarity-bar { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap } .mobilize-rarity-btn { background: var(--bg3); border: 1px solid var(--border); border-radius: 18px; color: var(--text-dim); padding: 5px 14px; font-size: .78rem; font-weight: 600; cursor: pointer; transition: all .15s } .mobilize-rarity-btn:hover { color: var(--text); border-color: rgba(255,255,255,.18) } .mobilize-rarity-btn.active { background: color-mix(in srgb, var(--r-color) 18%, transparent); border-color: var(--r-color); color: var(--r-color) } .mobilize-filter-label { font-size: .75rem; color: var(--text-dim); font-weight: 600; letter-spacing: .5px; margin-bottom: 6px; text-transform: uppercase } .mobilize-cat-bar { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap } .mobilize-cat-btn { background: var(--bg3); border: 1px solid var(--border); border-radius: 18px; color: var(--text-dim); padding: 5px 12px; font-size: .78rem; cursor: pointer; transition: all .15s; white-space: nowrap } .mobilize-cat-btn:hover { color: var(--text); border-color: rgba(255,255,255,.18) } .mobilize-cat-btn.active { background: rgba(240,180,41,.15); border-color: var(--gold); color: var(--gold); font-weight: 600 } .mobilize-list { display: flex; flex-direction: column; gap: 18px } .mobilize-section { border: 1px solid var(--border); border-radius: 12px; background: var(--bg2); overflow: hidden } .mobilize-cat-header { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: linear-gradient(90deg, rgba(240,180,41,.08), transparent); border-bottom: 1px solid var(--border) } .mobilize-cat-icon { font-size: 1.1rem } .mobilize-cat-name { flex: 1; font-size: .95rem; font-weight: 700; color: var(--gold); letter-spacing: .3px } .mobilize-cat-count { font-size: .72rem; color: var(--text-dim); background: var(--bg4); padding: 2px 9px; border-radius: 10px } .mobilize-task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; padding: 12px } .mobilize-task { background: var(--bg3); border: 1px solid var(--border); border-left: 3px solid var(--r-color); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; transition: border-color .15s, transform .15s } .mobilize-task:hover { border-color: var(--r-color); transform: translateY(-1px) } .mobilize-task-top { display: flex; align-items: center; justify-content: space-between; gap: 8px } .mobilize-rarity { font-size: .68rem; font-weight: 700; color: var(--r-color); background: var(--r-bg); padding: 2px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: .5px } .mobilize-points { font-size: .82rem; font-weight: 700; color: var(--gold) } .mobilize-desc { font-size: .82rem; color: var(--text); line-height: 1.4; min-height: 34px } .mobilize-task-bot { display: flex; gap: 12px; font-size: .74rem; color: var(--text-dim); border-top: 1px dashed var(--border); padding-top: 6px; flex-wrap: wrap } .mobilize-meta-item b { color: var(--text) } .mobilize-hl { background: rgba(240,180,41,.28); color: inherit; border-radius: 3px; padding: 0 2px } @media (max-width: 600px) { .mobilize-task-grid { grid-template-columns: 1fr } .mobilize-tier-btn { font-size: .82rem; padding: 8px 10px } } /* ── Mobilize plan mode ── */ .mobilize-plan-layout { display: grid; grid-template-columns: 1fr 300px; gap: 0 14px; align-items: start } .mobilize-task.plan-mode { cursor: pointer; position: relative; padding-left: 38px; transition: border-color .15s, background .15s, opacity .15s } .mobilize-task.plan-mode:hover { border-color: var(--gold); } .mobilize-task.plan-mode.picked { border-color: var(--gold) !important; background: rgba(240,180,41,.1) !important } .mobilize-task.plan-mode.disabled { opacity: .4; pointer-events: none } .mobilize-check { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: 2px solid var(--border); border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700; color: var(--gold); background: var(--bg2); flex-shrink: 0 } .mobilize-task.plan-mode.picked .mobilize-check { border-color: var(--gold); background: rgba(240,180,41,.18) } /* ── Picked panel ── */ .mpick-panel { position: sticky; top: 70px; max-height: calc(100vh - 90px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px } .mpick-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px } .mpick-title { font-weight: 700; font-size: .95rem; color: var(--gold) } .mpick-meta { display: flex; align-items: center; gap: 8px } .mpick-count { font-size: .78rem; color: var(--text-dim); background: var(--bg4); border-radius: 10px; padding: 2px 8px } .mpick-clear-btn { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--text-dim); cursor: pointer; font-size: .75rem; padding: 2px 8px; transition: color .15s, border-color .15s } .mpick-clear-btn:hover { color: var(--red); border-color: var(--red) } .mpick-total { font-size: .82rem; color: var(--text-dim); padding: 6px 10px; background: var(--bg4); border-radius: 7px; margin-bottom: 4px } .mpick-total b { color: var(--gold) } .mpick-empty { text-align: center; padding: 24px 12px; color: var(--text-dim); font-size: .85rem; line-height: 1.6 } .mpick-item { position: relative; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 8px 32px 8px 10px } .mpick-item-body { display: flex; align-items: center; gap: 6px; margin-bottom: 3px } .mpick-item-rarity { font-size: .75rem; font-weight: 700 } .mpick-item-pts { font-size: .75rem; color: var(--text-dim) } .mpick-item-desc { font-size: .8rem; color: var(--text); line-height: 1.35; margin-bottom: 3px } .mpick-item-cat { font-size: .72rem; color: var(--text-dim) } .mpick-qty { display: flex; align-items: center; gap: 6px; margin-top: 6px } .mpick-qty-btn { background: var(--bg4); border: 1px solid var(--border); border-radius: 5px; color: var(--text); cursor: pointer; font-size: .9rem; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; transition: border-color .15s, color .15s; line-height: 1 } .mpick-qty-btn:hover { border-color: var(--gold); color: var(--gold) } .mpick-qty-val { font-size: .88rem; font-weight: 700; color: var(--text); min-width: 20px; text-align: center } .mpick-remove { position: absolute; top: 6px; right: 6px; background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: .8rem; padding: 2px 5px; border-radius: 4px; line-height: 1; transition: color .15s } .mpick-remove:hover { color: var(--red) } @media (max-width: 900px) { .mobilize-plan-layout { grid-template-columns: 1fr; } .mpick-panel { position: static; max-height: none; order: -1 } } /* ── Heroes Tab ── */ .hero-search-wrap { position: relative; max-width: 420px; margin-bottom: 14px } .hero-search-input { width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: .9rem; padding: 9px 36px 9px 14px; outline: none; transition: border-color .15s } .hero-search-input:focus { border-color: var(--gold) } .hero-clear-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: .85rem; padding: 2px 4px; display: flex; align-items: center; justify-content: center } .hero-clear-btn:hover { color: var(--text) } /* Reserve space for both filter rows (gen + tags). The tag row only appears after hero data loads, so without this the container grows and pushes #heroListEl down → CLS. */ #heroFilters { min-height: 84px } .hero-filter-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; flex-wrap: wrap } .hero-filter-label { font-size: .72rem; color: var(--text-dim); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding-top: 6px; white-space: nowrap; min-width: 60px } .hero-filter-bar { display: flex; gap: 6px; flex-wrap: wrap } .hero-filter-btn { background: var(--bg3); border: 1px solid var(--border); border-radius: 16px; color: var(--text-dim); padding: 4px 12px; font-size: .76rem; font-weight: 600; cursor: pointer; transition: all .15s } .hero-filter-btn:hover { color: var(--text); border-color: rgba(255,255,255,.18) } .hero-filter-btn.active { background: linear-gradient(135deg, rgba(240,180,41,.18), rgba(240,180,41,.04)); border-color: var(--gold); color: var(--gold) } .hero-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; padding: 16px 20px; min-height: 500px } .hero-state-msg { grid-column: 1 / -1; text-align: center; padding: 48px 24px; color: var(--text-dim) } .hero-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; display: flex; gap: 12px; padding: 14px; transition: border-color .2s, box-shadow .2s } .hero-card:hover { border-color: var(--border-gold); box-shadow: 0 2px 16px rgba(240,180,41,.1) } /* Image protection: disable drag, selection, and save actions on hero images */ .hero-avatar, .hd-avatar, .hero-skill-img, .hd-skill-img, img[src*="image_heros"] { -webkit-user-drag: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; pointer-events: auto; -webkit-touch-callout: none } .hero-avatar-wrap { position: relative; flex-shrink: 0; width: 88px; height: 88px; background-repeat: no-repeat; background-position: center; background-size: contain; } .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') } .hero-avatar { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); width: 70px; height: 74px; border-radius: 4px 4px 8px 8px / 4px 4px 14px 14px; object-fit: cover; object-position: center 30%; background: transparent; display: block } .hero-fly-badge { position: absolute; top: -4px; right: -4px; background: var(--blue); color: #fff; border-radius: 50%; width: 20px; height: 20px; font-size: .65rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 6px rgba(79,168,255,.4) } .hero-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px } .hero-name-row { display: flex; align-items: center; gap: 7px } .hero-name { font-size: 1rem; font-weight: 700; color: var(--gold) } .hero-gen-badge { font-size: .68rem; font-weight: 700; padding: 2px 7px; border-radius: 10px; background: rgba(176,106,255,.18); color: var(--purple); border: 1px solid rgba(176,106,255,.25); letter-spacing: .5px } .hero-nickname { font-size: .78rem; color: var(--text-dim); font-style: italic; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .hero-tags-row { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px } .hero-tag { font-size: .66rem; font-weight: 600; padding: 2px 7px; border-radius: 10px; background: var(--bg4); color: var(--text-dim); border: 1px solid var(--border); white-space: nowrap } .hero-skills-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 5px } .hero-skill-wrap { cursor: pointer; border-radius: 6px; border: 1px solid var(--border); overflow: hidden; transition: border-color .15s, box-shadow .15s; aspect-ratio: 1; width: 32px; height: 32px; min-width: 0 } .hero-skill-wrap:hover { border-color: var(--gold); box-shadow: 0 0 8px rgba(240,180,41,.3) } .hero-skill-img { width: 100%; height: 100%; object-fit: cover; display: block } /* Floating skill tooltip */ .hero-tooltip { position: fixed; z-index: 9999; background: var(--bg2); border: 1px solid var(--border-gold); border-radius: 8px; padding: 10px 14px; max-width: 260px; box-shadow: 0 4px 20px rgba(0,0,0,.5); pointer-events: none } .htip-name { font-size: .88rem; font-weight: 700; color: var(--gold); margin-bottom: 3px } .htip-type { font-size: .73rem; color: var(--blue); margin-bottom: 6px; font-weight: 600 } .htip-desc { font-size: .78rem; color: var(--text); line-height: 1.5 } @media (max-width: 600px) { .hero-grid { grid-template-columns: 1fr; padding: 12px; min-height: 300px } /* Filter rows wrap onto more lines on narrow screens — reserve more. */ #heroFilters { min-height: 132px } .hero-avatar-wrap { width: 72px; height: 72px } .hero-avatar { width: 58px; height: 62px } .hero-skill-wrap, .hero-skill-img { width: 30px; height: 30px } } /* ── Hero Detail Modal ── */ .hd-header { display: flex; gap: 16px; align-items: flex-start; padding: 20px 20px 16px; border-bottom: 1px solid var(--border) } .hd-avatar-wrap { flex-shrink: 0; position: relative; width: 120px; height: 120px; background-repeat: no-repeat; background-position: center; background-size: contain; } .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') } .hd-avatar { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); width: 96px; height: 102px; border-radius: 5px 5px 10px 10px / 5px 5px 18px 18px; object-fit: cover; object-position: center 30%; display: block; background: transparent; } .hd-meta { flex: 1; min-width: 0 } .hd-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px } .hd-name { font-size: 1.3rem; font-weight: 700; color: var(--gold) } .hd-nickname { font-size: .85rem; color: var(--text-dim); font-style: italic } .hd-skills { padding: 16px; display: flex; flex-direction: column; gap: 10px } .hd-skill { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 12px; transition: border-color .15s; display: flex; flex-direction: column; min-width: 0 } .hd-skill-awakening { border-color: rgba(240,180,41,.3); background: linear-gradient(135deg, rgba(240,180,41,.06), transparent) } .hd-skill-top { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px } .hd-skill-img-wrap { position: relative; flex-shrink: 0 } .hd-skill-img { width: 52px; height: 52px; border-radius: 7px; object-fit: cover; display: block; border: 1px solid var(--border) } .hd-skill-num { position: absolute; bottom: -5px; right: -5px; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; font-size: .65rem; font-weight: 700; color: var(--text-dim); padding: 1px 5px; line-height: 1.4 } .hd-skill-head { flex: 1; min-width: 0 } .hd-skill-name { font-size: .95rem; font-weight: 700; color: var(--text); margin-bottom: 3px } .hd-skill-type { font-size: .78rem; margin-bottom: 2px } .hd-skill-desc { font-size: .82rem; color: var(--text); line-height: 1.6; margin-bottom: 8px } .hd-skill-desc p { margin: 0 0 4px } .hd-skill-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px } .hd-skill-meta span { font-size: .74rem; color: var(--text-dim); background: var(--bg4); border: 1px solid var(--border); border-radius: 5px; padding: 2px 8px } .hd-upgrade { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px } .hd-upgrade summary { font-size: .76rem; color: var(--text-dim); cursor: pointer; user-select: none; font-weight: 600; letter-spacing: .3px; list-style: none; display: flex; align-items: center; gap: 5px } .hd-upgrade summary::before { content: '▶'; font-size: .6rem; transition: transform .15s } .hd-upgrade[open] summary::before { transform: rotate(90deg) } .hd-upgrade-body { margin-top: 8px; display: flex; flex-direction: column; gap: 3px } .hd-upgrade-body div { font-size: .76rem; color: var(--text-dim); padding: 2px 0; line-height: 1.4 } @media (max-width: 600px) { .hd-header { flex-direction: column; align-items: center; text-align: center } .hd-avatar-wrap { width: 96px; height: 96px } .hd-avatar { width: 76px; height: 82px } .hd-name-row { justify-content: center } .hd-skills { padding: 12px } } /* ═══════════════════════════════════════════════ TIER LIST BUILDER (Tools → Tier List) ═══════════════════════════════════════════════ */ .tier-container { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 18px; } .tier-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .tier-title { font-size: 1.2rem; font-weight: 700; color: var(--gold); } .tier-actions { display: flex; gap: 8px; flex-wrap: wrap } .tier-hint { font-size: .78rem; color: var(--text-dim); margin-bottom: 14px; padding: 8px 12px; background: var(--bg3); border-left: 3px solid var(--gold); border-radius: 4px; } .tier-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #1a1f2e; } .tier-row { display: flex; align-items: stretch; min-height: 90px; border-bottom: 1px solid rgba(0,0,0,.3); } .tier-row:last-child { border-bottom: none } .tier-label { width: 72px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 600; color: rgba(26, 31, 46, .92); text-shadow: 0 1px 1px rgba(255,255,255,.2); letter-spacing: .4px; font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; } .tier-drop { flex: 1; display: flex; flex-wrap: wrap; gap: 0; padding: 6px; align-items: center; background: #22283b; min-height: 112px; transition: background .15s; } .tier-drop.drop-over { background: rgba(240,180,41,.12); outline: 2px dashed var(--gold); outline-offset: -4px; } .tier-slot { position: relative; display: flex; gap: 0; padding: 0; margin: 0 4px; background: transparent; border-radius: 8px; border: 1px solid transparent; transition: background .15s, border-color .15s, transform .15s; } .tier-slot.is-pair { flex-direction: row; align-items: flex-end; background: transparent; border-color: transparent; gap: 0; padding: 0; cursor: grab; } /* Overlap secondary onto primary's shield transparent edge so the pair feels like one unit */ .tier-slot.is-pair .tier-hero.pair-secondary { margin-left: -18px } .tier-slot.is-pair:active { cursor: grabbing } .tier-slot.is-pair.dragging { opacity: .4 } /* Primary/secondary heroes in a pair are shrunk so the pair isn't wider than a normal card. */ .tier-slot.is-pair .tier-hero { pointer-events: none } .tier-slot.is-pair .tier-hero.pair-primary { --frame-w: 78px; --frame-h: 78px; --portrait-w: 64px; --portrait-h: 68px; } .tier-slot.is-pair .tier-hero.pair-secondary { --frame-w: 54px; --frame-h: 54px; --portrait-w: 44px; --portrait-h: 48px; } .tier-slot.is-pair .tier-hero.pair-primary .tier-hero-name { font-size: .62rem } .tier-slot.is-pair .tier-hero.pair-secondary .tier-hero-name { font-size: .54rem } .tier-slot.drop-over { background: rgba(240,180,41,.22); border-color: var(--gold); transform: scale(1.03); } .tier-slot-btn { position: absolute; width: 18px; height: 18px; border-radius: 50%; font-size: .7rem; font-weight: 700; line-height: 1; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s, background .15s; z-index: 3; } .tier-slot:hover .tier-slot-btn { opacity: 1 } .tier-remove { top: -6px; right: -6px; background: var(--red); color: white; } .tier-remove:hover { background: #ff6070 } .tier-swap { top: -6px; left: -6px; background: var(--gold); color: #1a1f2e; } .tier-swap:hover { background: #ffd97d } .tier-hero { --frame-w: 104px; --frame-h: 104px; --portrait-w: 86px; --portrait-h: 90px; --portrait-y: 54%; display: flex; flex-direction: column; align-items: center; cursor: grab; user-select: none; -webkit-user-drag: element; } .tier-hero:active { cursor: grabbing } .tier-hero.dragging { opacity: .4 } .tier-hero-frame { position: relative; width: var(--frame-w); height: var(--frame-h); background-repeat: no-repeat; background-position: center; background-size: contain; pointer-events: none; } .tier-hero img { position: absolute; left: 50%; top: var(--portrait-y); transform: translate(-50%, -50%); width: var(--portrait-w); height: var(--portrait-h); object-fit: cover; object-position: center 30%; pointer-events: none; border: 0; background: transparent; display: block; /* Clip portrait to match the shield inner shape (curved sides, pointed bottom). */ clip-path: polygon( 12% 0%, 88% 0%, 100% 18%, 100% 68%, 92% 82%, 78% 92%, 50% 100%, 22% 92%, 8% 82%, 0% 68%, 0% 18% ); } /* Rarity-based shield frames (PNG) — rare 5 gold, rare 4 purple, else blue */ .tier-hero.rar-5 .tier-hero-frame { background-image: url('/icons/hero_rare_5.png') } .tier-hero.rar-4 .tier-hero-frame { background-image: url('/icons/hero_rare_4.png') } .tier-hero.rar-low .tier-hero-frame { background-image: url('/icons/hero_rare_3.png') } .tier-hero .tier-hero-name { color: #ffffff } /* Solo/Pair mode switch */ .tier-mode-switch { display: inline-flex; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 2px; gap: 2px; } .tier-mode-btn { background: transparent; border: 0; color: var(--text-dim); font: inherit; font-size: .82rem; font-weight: 600; padding: 6px 12px; border-radius: 6px; cursor: pointer; transition: background .15s, color .15s; letter-spacing: .3px; } .tier-mode-btn:hover { color: var(--text) } .tier-mode-btn.active { background: var(--gold); color: #1a1f2e; } .tier-hero-name { font-size: .72rem; line-height: 1.15; color: #ffffff; margin-top: 4px; max-width: calc(var(--frame-w, 80px) + 18px); text-align: center; pointer-events: none; font-weight: 700; letter-spacing: .2px; text-shadow: 0 1px 2px rgba(0,0,0,.8); word-break: break-word; } /* Unranked pool */ .tier-pool-section { margin-top: 16px; } .tier-pool-title { font-size: .95rem; font-weight: 700; color: var(--text); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .tier-pool-count { font-size: .72rem; background: var(--bg4); color: var(--text-dim); border-radius: 10px; padding: 2px 9px; font-weight: 600; } .tier-pool-drop { min-height: 120px; background: var(--bg3); border: 1px dashed var(--border); border-radius: 8px; padding: 12px; } /* Save toast */ .tier-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px); background: linear-gradient(135deg, var(--gold), #ffd97d); color: #1a1f2e; padding: 10px 24px; border-radius: 24px; font-weight: 700; font-size: .9rem; box-shadow: 0 8px 24px rgba(0,0,0,.4); opacity: 0; transition: opacity .25s, transform .25s; z-index: 10000; pointer-events: none; } .tier-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* Mobile responsive */ @media (max-width: 700px) { .tier-label { width: 48px; font-size: 1.05rem } .tier-drop { padding: 6px; gap: 4px } .tier-hero { --frame-w: 62px; --frame-h: 72px; --portrait-w: 52px; --portrait-h: 56px; } .tier-hero-name { font-size: .62rem } .tier-slot.is-pair .tier-hero.pair-secondary { --frame-w: 44px; --frame-h: 50px; --portrait-w: 36px; --portrait-h: 40px; } .tier-slot { padding: 4px 6px } .tier-hint { font-size: .72rem } .tier-title { font-size: 1rem } } /* ── Custom confirm dialog ─────────────────────────────── */ .confirm-overlay { position: fixed; inset: 0; background: rgba(4, 8, 14, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 10001; opacity: 0; transition: opacity .18s ease; } .confirm-overlay.open { opacity: 1 } .confirm-card { width: min(420px, 100%); background: linear-gradient(160deg, #1b2236 0%, #141a2a 100%); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 28px 24px 20px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset; transform: translateY(14px) scale(.96); transition: transform .22s cubic-bezier(.34,1.56,.64,1); position: relative; overflow: hidden; } .confirm-overlay.open .confirm-card { transform: translateY(0) scale(1) } .confirm-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .7; } .confirm-card.is-danger::before { background: linear-gradient(90deg, transparent, #ff5a6a, transparent); } .confirm-icon { font-size: 2.4rem; line-height: 1; margin-bottom: 10px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); } .confirm-card.is-danger .confirm-icon { animation: confirmShake .6s ease; } @keyframes confirmShake { 0%, 100% { transform: translateX(0) } 20% { transform: translateX(-4px) rotate(-6deg) } 40% { transform: translateX(4px) rotate(6deg) } 60% { transform: translateX(-3px) rotate(-4deg) } 80% { transform: translateX(3px) rotate(4deg) } } .confirm-title { font-size: 1.15rem; font-weight: 700; color: var(--text); margin-bottom: 8px; letter-spacing: .3px; } .confirm-card.is-danger .confirm-title { color: #ff9aa5 } .confirm-msg { font-size: .9rem; color: var(--text-dim); line-height: 1.55; margin-bottom: 22px; } .confirm-actions { display: flex; gap: 10px; justify-content: flex-end; } .confirm-actions .btn { min-width: 96px; font-weight: 600 } @media (max-width: 480px) { .confirm-actions { flex-direction: column-reverse } .confirm-actions .btn { width: 100% } } /* ═══════════════════════════════════════════════ TRAINING CALCULATOR (Tools → Training) ═══════════════════════════════════════════════ */ .train-container { padding: 0; /* No text caret on labels/sliders; re-enable for number inputs below */ caret-color: transparent; user-select: none; -webkit-user-select: none; } .train-container input[type="number"] { user-select: text; -webkit-user-select: text; } .train-container input[type="number"]:focus { caret-color: var(--gold); } .train-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 1150px) { .train-panels { grid-template-columns: 1fr } } @media (max-width: 768px) { .train-panel { padding: 14px } .train-field { grid-template-columns: 1fr; gap: 4px } .train-field label { font-size: .8rem; background: transparent; border: none; padding: 0 2px; text-align: left; color: var(--text-dim); } /* Equal-width mode tabs on mobile only */ .train-mode-tab { flex: 1; text-align: center; padding: 8px 4px } /* Force all tier radios on a single row */ .train-radios { flex-wrap: nowrap; gap: 4px } .train-radio { flex: 1 1 0; min-width: 0; padding: 8px 2px; font-size: .7rem; white-space: nowrap; } .train-radio span { white-space: nowrap } } .train-panel { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 20px; } .train-title { font-size: 1.15rem; font-weight: 700; color: var(--gold); text-align: center; margin-bottom: 18px; } .train-field { display: grid; grid-template-columns: 140px 1fr; gap: 8px; margin-bottom: 8px; align-items: center; } .train-field label { font-size: .85rem; color: var(--text-dim); background: var(--bg3); border: 1px solid var(--border); border-radius: 7px; padding: 7px 12px; text-align: center; } .train-field input, .train-field select { background: var(--bg3); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font-size: .9rem; padding: 7px 12px; outline: none; transition: border-color .15s; width: 100%; font-family: inherit; } /* Hide blinking text caret on number inputs (annoying, not needed for numbers) */ .train-field input[type="number"] { caret-color: transparent } .train-field input[type="number"]:focus { caret-color: var(--gold) } .train-field input:focus, .train-field select:focus { border-color: var(--gold); } .train-result-title { text-align: center; margin: 20px 0 10px; color: var(--text); font-weight: 600; font-size: .95rem; } .train-table { width: 100%; border-collapse: collapse; font-size: .88rem; } .train-table thead th { background: var(--bg3); border: 1px solid var(--border); padding: 8px; color: var(--text-dim); font-weight: 600; font-size: .85rem; text-align: center; } .train-table td { border: 1px solid var(--border); padding: 10px 12px; text-align: center; font-variant-numeric: tabular-nums; } .train-table td.train-tier-cell { font-weight: 700; } .train-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.02); } /* Color coding: T3=blue, T4+T3→T4=purple, T5+T4→T5=gold */ .train-table td.train-tier-cell[data-tier="t3"] { color: var(--blue) } .train-table td.train-tier-cell[data-tier="t4"], .train-table td.train-tier-cell[data-tier="p34"] { color: var(--purple) } .train-table td.train-tier-cell[data-tier="t5"], .train-table td.train-tier-cell[data-tier="p45"] { color: var(--gold) } .train-radios { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; } .train-radio { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 10px 16px; cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--text-dim); transition: all .15s; min-width: 60px; } .train-radio input { display: none } .train-radio span { font-weight: 700 } .train-radio.active { background: color-mix(in srgb, var(--tier-color, var(--purple)) 15%, transparent); border-color: var(--tier-color, var(--purple)); color: var(--tier-color, var(--purple)); } .train-radio:hover:not(.active) { border-color: rgba(255,255,255,.18); color: var(--text); } .train-radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--text-dim); background: transparent; transition: all .15s; } .train-radio.active::after { background: var(--tier-color, var(--purple)); border-color: var(--tier-color, var(--purple)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tier-color, var(--purple)) 25%, transparent); } .train-sliders { display: flex; flex-direction: column; gap: 14px; margin-bottom: 12px; } .train-slider-row { display: grid; grid-template-columns: 80px 1fr 130px; gap: 10px; align-items: center; } .train-slider-row.disabled { opacity: .35; pointer-events: none } .train-slider-row label { font-size: .85rem; color: var(--text-dim); text-align: right; } .train-slider-row input[type="range"] { -webkit-appearance: none; appearance: none; height: 20px; background: transparent; outline: none; cursor: pointer; padding: 0; margin: 0; touch-action: pan-y; } /* Visual track (8px) drawn via pseudo-element, hit area stays 20px */ .train-slider-row input[type="range"]::-webkit-slider-runnable-track { height: 8px; background: linear-gradient(to right, var(--tier-color, var(--purple)) var(--fill, 0%), var(--bg4) var(--fill, 0%)); border-radius: 4px; } .train-slider-row input[type="range"]::-moz-range-track { height: 8px; background: linear-gradient(to right, var(--tier-color, var(--purple)) var(--fill, 0%), var(--bg4) var(--fill, 0%)); border-radius: 4px; } .train-slider-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; background: var(--tier-color, var(--purple)); border-radius: 50%; cursor: pointer; border: 2px solid var(--bg2); box-shadow: 0 0 0 1px var(--tier-color, var(--purple)); margin-top: -4px; /* center thumb on 8px track inside 20px input */ } .train-slider-row input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; background: var(--tier-color, var(--purple)); border-radius: 50%; cursor: pointer; border: 2px solid var(--bg2); } .train-slider-val { font-size: .85rem; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; } .train-slider-valwrap { display: flex; align-items: center; gap: 6px; justify-content: flex-end; } .train-slider-num { width: 78px; padding: 4px 8px; background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: .85rem; font-variant-numeric: tabular-nums; text-align: right; outline: none; transition: border-color .15s; -moz-appearance: textfield; } .train-slider-num::-webkit-outer-spin-button, .train-slider-num::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } .train-slider-num:focus { border-color: var(--tier-color, var(--gold)); background: var(--bg2); } .train-slider-suffix { font-size: .8rem; color: var(--text-dim); white-space: nowrap; } .train-pool-summary { margin-top: 6px; padding: 10px 14px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; } .train-pool-bar { height: 6px; background: var(--bg4); border-radius: 3px; overflow: hidden; margin-bottom: 6px; } .train-pool-fill { height: 100%; border-radius: 3px; } .train-pool-text { font-size: .82rem; color: var(--text-dim); text-align: center; font-variant-numeric: tabular-nums; } .train-pool-text b { color: var(--text); font-weight: 700 } .train-resources { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; } .train-res-item { display: flex; align-items: center; gap: 8px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; } .train-res-icon { width: 26px; height: 26px; flex-shrink: 0; object-fit: contain; } .train-res-label { color: var(--text-dim); font-size: .85rem; font-weight: 600; } .train-res-val { margin-left: auto; color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; font-size: .92rem; } @media (max-width: 600px) { .train-field { grid-template-columns: 100px 1fr } .train-slider-row { grid-template-columns: 60px 1fr 110px } .train-resources { grid-template-columns: 1fr } } /* Saved Steps — feature to accumulate training plans */ .train-save-step-btn { width: 100%; margin-top: 14px; padding: 9px 18px; font-size: .85rem; font-weight: 600; letter-spacing: .3px; background: linear-gradient(135deg, #4fa8ff, #2d7cd9); color: #fff; border: 1px solid #4fa8ff; border-radius: 8px; cursor: pointer; transition: all .15s; } .train-save-step-btn:hover { background: linear-gradient(135deg, #66b8ff, #4189e6); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79, 168, 255, .3); } .train-save-step-btn:active { transform: translateY(0); } .train-saved-section { margin-top: 16px; background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; } .train-saved-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; } .train-saved-title { font-size: 1.05rem; font-weight: 700; color: var(--gold); } .train-saved-clear { font-size: .78rem; padding: 5px 12px; color: var(--red); border-color: rgba(255,68,85,.35); } .train-saved-clear:hover { background: rgba(255,68,85,.12); } .train-saved-empty { text-align: center; padding: 24px; color: var(--text-dim); font-size: .88rem; background: var(--bg3); border: 1px dashed var(--border); border-radius: 8px; } .train-saved-tablewrap { overflow-x: auto; container-type: inline-size; container-name: savedsteps; } .train-saved-grid { width: 100%; font-size: .86rem; min-width: 720px; } .train-saved-row { display: grid; grid-template-columns: 110px 180px minmax(360px, 1fr) 240px 140px 44px; column-gap: 40px; align-items: start; border-bottom: 1px solid var(--border); } .train-saved-row .tsc { padding: 10px 12px; font-variant-numeric: tabular-nums; min-width: 0; word-break: break-word; } .train-saved-head { background: var(--bg3); } .train-saved-head .tsc { color: var(--text-dim); font-weight: 600; font-size: .78rem; letter-spacing: .5px; text-transform: uppercase; } .tsc-loai { font-weight: 700; white-space: nowrap; } .tsc-event { overflow: hidden; min-width: 0; } .train-saved-event { display: inline-block; font-size: .74rem; color: var(--text-dim); background: none; border-radius: 4px; padding: 2px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .train-saved-del { background: none; border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; width: 26px; height: 26px; border-radius: 5px; transition: all .15s; } .train-saved-del:hover { color: var(--red); border-color: var(--red); background: rgba(255,68,85,.1); } .train-saved-total { background: linear-gradient(135deg, rgba(240,180,41,.1), rgba(240,180,41,.03)); border-top: 2px solid var(--gold); border-bottom: none; } .train-saved-total .tsc { padding: 14px 12px; font-size: 1rem; color: var(--gold); } .train-saved-total .tsc b { color: var(--gold); font-weight: 700; } .train-saved-total .tsc-hl b { font-size: 1.15rem; } .train-saved-res-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; background: var(--bg3); padding: 14px 12px; } .train-saved-res-item { display: flex; align-items: center; gap: 10px; color: var(--text); font-variant-numeric: tabular-nums; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; min-width: 0; overflow: hidden; } .train-saved-res-item b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .train-saved-res-item img { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; } .train-saved-res-label { color: var(--text-dim); font-size: .9rem; flex: 1; font-weight: 600; } .train-saved-res-item b { color: var(--text); font-weight: 700; font-size: 1.05rem; } /* Tablet: nén grid steps khi container còn vừa */ @container savedsteps (max-width: 1100px) and (min-width: 901px) { .train-saved-row { grid-template-columns: 80px 110px minmax(160px, 1fr) 150px 100px 36px; column-gap: 12px; } .train-saved-grid { min-width: 0; font-size: .84rem; } } /* Narrow container: chuyển sang card stacked */ @container savedsteps (max-width: 900px) { .train-saved-tablewrap { overflow-x: hidden; } .train-saved-grid { min-width: 0; font-size: 1rem; } .train-saved-head { display: none; } .train-saved-row { grid-template-columns: 1fr auto; grid-template-areas: "loai loai" "time ." "unit unit" "point point" "event del"; column-gap: 14px; row-gap: 6px; padding: 14px 0; } .train-saved-row .tsc { padding: 3px 0; min-width: 0; } .tsc-loai { grid-area: loai; font-size: 1.05rem; font-weight: 700; align-self: center; } /* Flex label + value layout — label luôn đúng 96px, value luôn thẳng hàng */ .tsc-time { grid-area: time; display: flex; align-items: center; gap: 8px; font-size: .95rem; } .tsc-unit { grid-area: unit; display: flex; align-items: flex-start; gap: 8px; line-height: 1.7; font-size: 1rem; } .tsc-point { grid-area: point; display: flex; align-items: center; gap: 8px; font-size: 1.05rem; } .tsc-unit b { font-size: 1.05rem; } .tsc-point b { font-size: 1.1rem; } .tsc-event { grid-area: event; justify-self: start; align-self: center; } .tsc-event .train-saved-event { font-size: .85rem; padding: 0; background: none; } .tsc-del { grid-area: del; justify-self: end; align-self: center; } .train-saved-del { width: 32px; height: 32px; font-size: 1rem; } /* Label ::before — flex item cố định 96px */ .tsc-time::before, .tsc-unit::before, .tsc-point::before { flex: 0 0 96px; color: var(--text-dim); font-size: .78rem; font-weight: 500; white-space: nowrap; } .tsc-time::before { content: attr(data-label); } .tsc-unit::before { content: attr(data-label); margin-top: 3px; } .tsc-point::before { content: attr(data-label); } /* Value — flex item chiếm phần còn lại */ .tsc-content { flex: 1; min-width: 0; } .tsc-time > *, .tsc-unit > *, .tsc-point > * { flex: 1; min-width: 0; } /* Total row — highlight box */ .train-saved-total { background: rgba(240, 180, 41, 0.06); border: 1px solid rgba(240, 180, 41, 0.18); border-radius: 10px; padding: 18px 12px !important; margin-top: 8px; row-gap: 10px !important; } .train-saved-total .tsc { padding: 3px 0 !important; } .train-saved-total .tsc-loai { border-bottom: 1px solid rgba(240,180,41,.15); padding-bottom: 10px !important; margin-bottom: 2px; } .train-saved-total .tsc-hl b { color: var(--gold); } .train-saved-total .tsc:empty, .train-saved-total .tsc-del { display: none; } } /* Fallback cho trình duyệt không hỗ trợ container query: ép card layout ở viewport hẹp */ @media (max-width: 820px) { .train-saved-section { padding: 12px; } .train-saved-tablewrap { overflow-x: hidden !important; } .train-saved-grid { min-width: 0 !important; font-size: 1rem; } .train-saved-head { display: none !important; } .train-saved-row { grid-template-columns: 1fr auto !important; grid-template-areas: "loai loai" "time ." "unit unit" "point point" "event del" !important; column-gap: 14px !important; row-gap: 6px !important; padding: 14px 0 !important; } .train-saved-row .tsc { padding: 3px 0; min-width: 0; } .tsc-loai { grid-area: loai; font-size: 1.05rem; font-weight: 700; align-self: center; } .tsc-time { grid-area: time; display: flex !important; align-items: center !important; gap: 8px !important; font-size: .95rem; } .tsc-unit { grid-area: unit; display: flex !important; align-items: flex-start !important; gap: 8px !important; line-height: 1.7; font-size: 1rem; } .tsc-point { grid-area: point; display: flex !important; align-items: center !important; gap: 8px !important; font-size: 1.05rem; } .tsc-event { grid-area: event; justify-self: start !important; align-self: center !important; } .tsc-event .train-saved-event { font-size: .85rem; padding: 0 !important; background: none !important; } .tsc-del { grid-area: del; justify-self: end !important; align-self: center !important; } .tsc-content { flex: 1 !important; min-width: 0 !important; } .tsc-time::before, .tsc-unit::before, .tsc-point::before { flex: 0 0 96px !important; color: var(--text-dim); font-size: .78rem; font-weight: 500; white-space: nowrap; } .tsc-time::before { content: attr(data-label); } .tsc-unit::before { content: attr(data-label); margin-top: 3px !important; } .tsc-point::before { content: attr(data-label); } .tsc-time > *, .tsc-unit > *, .tsc-point > * { flex: 1 !important; min-width: 0 !important; } .train-saved-total { background: rgba(240, 180, 41, 0.06) !important; border: 1px solid rgba(240, 180, 41, 0.18) !important; border-radius: 10px !important; padding: 18px 12px !important; margin-top: 8px !important; row-gap: 10px !important; } .train-saved-total .tsc { padding: 3px 0 !important; } .train-saved-total .tsc-loai { border-bottom: 1px solid rgba(240,180,41,.15) !important; padding-bottom: 10px !important; margin-bottom: 2px; } .train-saved-total .tsc-hl b { color: var(--gold) !important; } .train-saved-total .tsc:empty, .train-saved-total .tsc-del { display: none !important; } .train-saved-res-grid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 540px) { .train-saved-res-grid { grid-template-columns: 1fr !important; } } /* RSS grid container-aware */ @container savedsteps (max-width: 900px) { .train-saved-res-grid { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; } .train-saved-res-item { padding: 10px 12px; gap: 8px; } .train-saved-res-item img { width: 22px; height: 22px; } .train-saved-res-label { font-size: .82rem; } .train-saved-res-item b { font-size: .95rem; } } @container savedsteps (max-width: 540px) { .train-saved-res-grid { grid-template-columns: 1fr } .train-saved-res-item b { white-space: normal; } } /* ─── Training Mode Tabs ──────────────────────────────────────────────── */ .train-mode-tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 2px solid var(--border); } .train-mode-tab { background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 8px 20px; color: var(--text-dim); font-weight: 600; font-size: .9rem; cursor: pointer; transition: color .15s, border-color .15s; white-space: nowrap; } .train-mode-tab:hover:not(.active) { color: var(--text); } .train-mode-tab.active { color: var(--gold); border-bottom-color: var(--gold); } /* ─── Speed-up Calculator ─────────────────────────────────────────────── */ .speed-tier-inputs { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .speed-tier-row { display: grid; grid-template-columns: 80px 1fr 48px; gap: 8px; align-items: center; } .speed-tier-label { font-weight: 700; font-size: .95rem; } .speed-tier-input { background: var(--bg3); border: 1px solid var(--border); border-radius: 7px; color: var(--text); padding: 7px 10px; font-size: .9rem; width: 100%; box-sizing: border-box; } .speed-tier-input:focus { border-color: var(--gold); outline: none; } .speed-tier-unit { color: var(--text-dim); font-size: .85rem; white-space: nowrap; } .train-speed-total-row td { background: var(--bg3); font-size: .9rem; } .speed-tier-line { font-variant-numeric: tabular-nums; line-height: 1.6; font-weight: 600; } .speed-saved-grid .train-saved-total .tsc-event { font-size: 1.05rem; } .speed-saved-grid .train-saved-total .tsc-event b, .speed-saved-grid .train-saved-total .tsc-event .train-saved-event { font-size: 1.15rem; color: var(--gold); background: transparent; padding: 0; } .speed-step-total { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); } .speed-saved-data-row .tsc-event { text-align: left; } .speed-saved-data-row .tsc-event .speed-tier-line, .speed-saved-data-row .tsc-event .speed-step-total { text-align: left; } .pow-speed-box { margin-top: 14px; background: linear-gradient(135deg, rgba(79,168,255,.14), rgba(45,124,217,.05)); border: 1px solid rgba(79,168,255,.3); border-radius: 10px; padding: 16px; text-align: center; } .pow-speed-label { font-size: .82rem; color: var(--text-dim); margin-bottom: 6px; } .pow-speed-big { font-size: 1.6rem; font-weight: 700; color: #4fa8ff; font-variant-numeric: tabular-nums; margin-bottom: 4px; } .pow-speed-mins { font-size: .9rem; color: var(--text-dim); font-variant-numeric: tabular-nums; } .speed-result-box { background: linear-gradient(135deg, rgba(240,180,41,.12), rgba(240,180,41,.04)); border: 1px solid rgba(240,180,41,.3); border-radius: 10px; padding: 18px 16px; text-align: center; } .speed-result-label { font-size: .82rem; color: var(--text-dim); margin-bottom: 10px; } .speed-buff-hint { font-style: italic; } .speed-result-big { font-size: 1.7rem; font-weight: 700; color: var(--gold); margin-bottom: 4px; } .speed-result-mins { font-size: 1rem; color: var(--text-dim); font-variant-numeric: tabular-nums; } /* ─── POW Placeholder ─────────────────────────────────────────────────── */ .train-pow-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 24px; text-align: center; gap: 12px; } .train-pow-icon { font-size: 3rem; } .train-pow-title { font-size: 1.5rem; font-weight: 700; color: var(--text); } .train-pow-desc { font-size: 1rem; color: var(--text-dim); } /* ─── Speed saved steps grid overrides ───────────────────────────────── */ .speed-saved-grid { min-width: 680px; } .speed-saved-grid .train-saved-row { grid-template-columns: 15fr 10fr 25fr 25fr 20fr 44px; column-gap: 16px; } .speed-saved-grid .tsc-loai { white-space: normal; line-height: 1.6; word-break: break-word; } /* Responsive card layout for speed steps — must override higher-specificity desktop rule */ @container savedsteps (max-width: 900px) { .speed-saved-grid { min-width: 0; } .speed-saved-grid .train-saved-row { grid-template-columns: 1fr auto; grid-template-areas: "loai loai" "time ." "unit unit" "point point" "event del"; column-gap: 14px; row-gap: 6px; padding: 14px 10px; } .speed-saved-grid .tsc-event { justify-self: start; align-self: center; } .speed-saved-grid .tsc-del { justify-self: end; align-self: center; } .speed-saved-grid .tsc-event .train-saved-event { padding: 0; } /* Inline labels — grid (speed dùng grid vì có multi-item stacking) */ .speed-saved-grid .tsc-time, .speed-saved-grid .tsc-unit, .speed-saved-grid .tsc-point, .speed-saved-grid .tsc-event { display: grid; grid-template-columns: 96px 1fr; column-gap: 8px; row-gap: 4px; align-items: center; } .speed-saved-grid .tsc-time > *, .speed-saved-grid .tsc-unit > *, .speed-saved-grid .tsc-point > *, .speed-saved-grid .tsc-event > * { grid-column: 2; } .speed-saved-grid .tsc-time::before, .speed-saved-grid .tsc-unit::before, .speed-saved-grid .tsc-point::before, .speed-saved-grid .tsc-event::before { content: attr(data-label); grid-column: 1; grid-row: 1; color: var(--text-dim); font-size: .78rem; font-weight: 500; } } @media (max-width: 820px) { .speed-saved-grid { min-width: 0 !important; } .speed-saved-grid .train-saved-row { grid-template-columns: 1fr auto !important; grid-template-areas: "loai loai" "time ." "unit unit" "point point" "event del" !important; column-gap: 14px !important; row-gap: 6px !important; padding: 14px 10px !important; } .speed-saved-grid .tsc-event { justify-self: start !important; align-self: center !important; } .speed-saved-grid .tsc-del { justify-self: end !important; align-self: center !important; } .speed-saved-grid .tsc-event .train-saved-event { padding: 0 !important; } .speed-saved-grid .tsc-time, .speed-saved-grid .tsc-unit, .speed-saved-grid .tsc-point, .speed-saved-grid .tsc-event { display: grid !important; grid-template-columns: 96px 1fr !important; column-gap: 8px !important; row-gap: 4px !important; align-items: center !important; } .speed-saved-grid .tsc-time > *, .speed-saved-grid .tsc-unit > *, .speed-saved-grid .tsc-point > *, .speed-saved-grid .tsc-event > * { grid-column: 2 !important; } .speed-saved-grid .tsc-time::before, .speed-saved-grid .tsc-unit::before, .speed-saved-grid .tsc-point::before, .speed-saved-grid .tsc-event::before { content: attr(data-label); grid-column: 1 !important; grid-row: 1 !important; color: var(--text-dim) !important; font-size: .78rem !important; font-weight: 500 !important; } } /* ══════════════════════════════════════════════ PET CALCULATOR ══════════════════════════════════════════════ */ .pet-container { max-width: 1600px; margin: 0 auto } .pet-panels { gap: 16px } .pet-left-panel { flex: 0 0 340px; min-width: 280px } .pet-right-panel { flex: 1; min-width: 300px } @media (max-width: 760px) { .pet-left-panel, .pet-right-panel { flex: 1 1 100% } } /* Side-by-side Input (left) + Output (right) — giống app Tkinter */ .pet-layout { display: grid; grid-template-columns: 480px 1fr; gap: 16px; align-items: start } .pet-input-col, .pet-output-col { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--border) transparent } @media (min-width: 1281px) { .pet-input-col { position: sticky; top: 16px; min-width: 0; max-height: calc(100vh - 100px); overflow-y: auto; overscroll-behavior: contain } .pet-output-col { min-width: 0; max-height: calc(100vh - 100px); overflow-y: auto; overscroll-behavior: contain } } .pet-section-title { font-size: .86rem; font-weight: 700; color: var(--gold); letter-spacing: .02em; padding: 10px 4px 6px; border-bottom: 1px solid var(--border); margin: 18px 0 8px; display: flex; align-items: center; gap: 8px } .pet-section-title:first-child { margin-top: 0 } .pet-section-hint { color: var(--text-dim); font-size: .74rem; font-weight: 400 } @media (max-width: 1280px) { .pet-layout { grid-template-columns: 1fr } .pet-input-col { min-width: 0 } .pet-output-col { min-width: 0; max-height: 75vh; overflow-y: auto; overscroll-behavior: contain } } /* Pet selector */ .pet-selector { margin-bottom: 4px; max-height: 260px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent } .pet-group-label { font-size: .72rem; color: var(--text-dim); letter-spacing: .06em; text-transform: uppercase; padding: 6px 2px 3px; margin-top: 4px } .pet-card-grid { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 4px } .pet-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 6px; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; background: var(--bg2); transition: all .15s; width: 68px } .pet-card:hover { border-color: var(--gold); background: rgba(255,180,0,.08) } .pet-card-active { border-color: var(--gold); background: rgba(255,180,0,.15) } .pet-card-img { width: 44px; height: 44px; object-fit: contain; border-radius: 4px } .pet-card-img-empty { width: 44px; height: 44px; background: var(--bg3); border-radius: 4px } .pet-card-name { font-size: .63rem; color: var(--text); text-align: center; line-height: 1.2; max-width: 64px; word-break: break-word } .pet-card-active .pet-card-name { color: var(--gold) } .pet-selected-info { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 10px; background: var(--bg2); border-radius: 8px; border: 1px solid var(--border) } .pet-selected-avatar { width: 48px; height: 48px; object-fit: contain; border-radius: 6px } .pet-selected-name { font-weight: 700; color: var(--gold); font-size: .95rem } .pet-selected-en { font-size: .75rem; color: var(--text-dim) } /* Combo + avatar layout (giống app Tkinter) */ .pet-combo-row { display: flex; gap: 12px; align-items: flex-start; padding: 6px 2px 10px; border-bottom: 1px solid var(--border); margin-bottom: 8px } .pet-combo-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px } .pet-combo-label { font-size: .8rem; color: var(--text-dim) } .pet-combo { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: .9rem; cursor: pointer } .pet-combo:focus { outline: none; border-color: var(--gold) } .pet-combo optgroup { color: var(--gold); font-style: normal; font-weight: 700 } .pet-combo option { color: var(--text); background: var(--bg); padding: 4px } .pet-combo-name { padding: 6px 2px 0 } .pet-combo-name-vi { font-weight: 700; color: var(--gold); font-size: 1rem } .pet-combo-name-en { color: var(--text-dim); font-size: .78rem; font-style: italic } .pet-combo-avatar { width: 140px; height: 140px; flex-shrink: 0; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden } .pet-combo-avatar img { width: 100%; height: 100%; object-fit: contain } .pet-combo-avatar-empty { color: var(--text-dim); font-size: .78rem; font-style: italic; text-align: center; padding: 8px } /* Stat sliders */ .pet-sliders { display: flex; flex-direction: column; gap: 7px } .pet-slider-row { display: grid; grid-template-columns: 96px 1fr 60px 52px; align-items: center; gap: 7px } .pet-slider-label { font-size: .82rem; color: var(--text-dim); transition: color .15s, font-weight .15s } .pet-slider-hi .pet-slider-label { color: #26c6da; font-weight: 600 } .pet-slider-hi-strong .pet-slider-label { color: var(--gold); font-weight: 700 } .pet-slider-range { -webkit-appearance: none; appearance: none; height: 8px; border-radius: 4px; outline: none; cursor: pointer; touch-action: pan-y; background: linear-gradient(to right, var(--gold) var(--fill,0%), var(--border) var(--fill,0%)) } .pet-slider-hi .pet-slider-range { background: linear-gradient(to right, #26c6da var(--fill,0%), var(--border) var(--fill,0%)) } .pet-slider-hi-strong .pet-slider-range { background: linear-gradient(to right, var(--gold) var(--fill,0%), var(--border) var(--fill,0%)) } .pet-slider-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); border: 2px solid #1a1400; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.4) } .pet-slider-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--gold); border: 2px solid #1a1400; cursor: pointer } .pet-slider-num { padding: 4px 6px; background: var(--bg2); border: 1px solid var(--border); border-radius: 5px; color: var(--text); font-size: .88rem; text-align: right; width: 100%; font-weight: 700 } .pet-slider-max { font-size: .82rem; color: var(--text-dim); white-space: nowrap; font-weight: 600 } /* Combat sim */ .pet-sim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 6px } .pet-sim-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 8px; background: var(--bg2); border-radius: 6px; border: 1px solid var(--border) } .pet-sim-label { font-size: .76rem; color: var(--text-dim) } .pet-sim-input { width: 48px; padding: 3px 5px; background: var(--bg); border: 1px solid var(--border); border-radius: 5px; color: var(--text); font-size: .82rem; text-align: right } @media (max-width: 500px) { .pet-sim-grid { grid-template-columns: 1fr } } /* Skill slot grid (2×4) */ .pet-slot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 4px } @media (max-width: 500px) { .pet-slot-grid { grid-template-columns: repeat(4, 1fr) } } .pet-slot-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; background: var(--bg); border-radius: 8px; border: 1px solid var(--border); transition: border-color .15s, background .15s; height: 104px; justify-content: center } .pet-slot-card.pet-slot-active { border-color: var(--border); background: var(--bg2) } .pet-slot-card.pet-slot-core { border-color: rgba(255,180,0,.4); background: rgba(255,180,0,.04) } .pet-slot-icon-wrap { width: 52px; height: 52px; min-height: 52px; flex: 0 0 52px; border-radius: 6px; cursor: pointer; border: 1px solid transparent; display: flex; align-items: center; justify-content: center; transition: border-color .15s, transform .1s; overflow: hidden; box-sizing: border-box } .pet-slot-active .pet-slot-icon-wrap { border-color: var(--border) } .pet-slot-icon-wrap:hover { border-color: var(--gold); transform: scale(1.08) } .pet-slot-icon { width: 50px; height: 50px; object-fit: contain; border-radius: 5px; display: block } .pet-slot-icon-empty { width: 50px; height: 50px; object-fit: contain; display: block; opacity: .9; flex: 0 0 auto } .pet-slot-icon-wrap:hover .pet-slot-icon-empty { opacity: 1 } .pet-slot-name { font-size: .64rem; text-align: center; line-height: 1.15; max-width: 78px; word-break: break-word; height: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100% } .pet-slot-name.empty { color: var(--text-dim) } .pet-slot-name.core { color: var(--gold); font-weight: 600 } .pet-slot-name:not(.empty):not(.core) { color: var(--text) } .pet-slot-name[data-dh] { cursor: help } .pet-slot-icon-wrap[data-dh] { cursor: help } .pet-slot-stars { display: flex; gap: 2px; align-items: center; padding: 0 2px } .pet-slot-star { width: 13px; height: 13px; cursor: pointer; display: block; opacity: .7; transition: opacity .1s, transform .1s } .pet-slot-star.on { opacity: 1 } .pet-slot-star:hover { transform: scale(1.2) } .pet-slot-x { position: absolute; top: 3px; right: 3px; background: rgba(180,40,40,.7); border: none; border-radius: 4px; color: #fff; font-size: .65rem; cursor: pointer; padding: 1px 4px; line-height: 1.4; transition: background .12s } .pet-slot-x:hover { background: #c0392b } .pet-slot-overflow { border-color: var(--warn, #fbbf24) !important; box-shadow: 0 0 0 1px rgba(251,191,36,.35) inset } .pet-slot-warn { position: absolute; top: 3px; left: 3px; background: var(--warn, #fbbf24); color: #1f2937; font-size: .7rem; font-weight: 700; padding: 0 4px; border-radius: 4px; line-height: 1.4; z-index: 2 } /* Action row */ .pet-action-row { display: flex; gap: 8px; margin-top: 14px } .pet-calc-btn { flex: 1; padding: 11px; border-radius: 8px; border: none; background: var(--gold); color: #1a1400; font-weight: 700; font-size: .95rem; cursor: pointer; transition: all .15s; letter-spacing: .02em } .pet-calc-btn:hover:not(:disabled) { background: #ffd93d; transform: translateY(-1px) } .pet-calc-btn:disabled { opacity: .6; cursor: not-allowed } .pet-reset-btn { padding: 11px 18px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg2); color: var(--text-dim); cursor: pointer; font-size: .9rem; transition: all .15s } .pet-reset-btn:hover { border-color: var(--gold); color: var(--gold) } /* Skill picker modal */ .pet-picker-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 16px } .pet-picker-modal { background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; width: min(860px, 100%); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 24px 80px rgba(0,0,0,.6) } .pet-picker-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 10px; border-bottom: 1px solid var(--border) } .pet-picker-title { font-size: 1rem; font-weight: 700; color: var(--gold) } .pet-picker-close { background: none; border: none; color: var(--text-dim); font-size: 1.1rem; cursor: pointer; padding: 2px 7px; border-radius: 5px; transition: background .12s } .pet-picker-close:hover { background: var(--bg3); color: var(--text) } .pet-picker-equipped { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; padding: 8px 18px; background: var(--bg3); border-bottom: 1px solid var(--border) } .pet-picker-eq-label { font-size: .74rem; color: var(--text-dim); padding-top: 5px; white-space: nowrap; flex-shrink: 0 } .pet-picker-eq-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; flex: 1 } .pet-picker-eq-chip { display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; font-size: .78rem; width: 100% } .pet-picker-eq-icon { width: 28px; height: 28px; object-fit: contain; border-radius: 4px; flex-shrink: 0 } .pet-picker-eq-info { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1 } .pet-picker-eq-name { color: var(--text); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .pet-picker-eq-stars { color: var(--gold); font-size: .72rem; letter-spacing: 1px } .pet-picker-search-row { display: flex; align-items: center; gap: 8px; padding: 10px 14px 8px } .pet-picker-search-icon { font-size: 1rem } .pet-picker-search { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: .9rem; padding: 7px 12px; outline: none } .pet-picker-search:focus { border-color: var(--gold) } .pet-picker-list { overflow-y: auto; flex: 1; padding: 0 6px 10px; scrollbar-width: thin; scrollbar-color: var(--border) transparent } .pet-picker-section { margin-bottom: 4px } .pet-picker-section-title { font-size: .92rem; font-weight: 700; color: var(--gold); padding: 14px 10px 6px; letter-spacing: .02em } .pet-picker-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; transition: border-color .12s, background .12s; border: 1px solid var(--border); background: var(--bg2); margin: 4px 4px } .pet-picker-row:hover { border-color: var(--gold); background: var(--bg3) } .pet-picker-row-icon { width: 48px; height: 48px; flex-shrink: 0; border-radius: 6px; overflow: hidden; background: var(--bg3); display: flex; align-items: center; justify-content: center } .pet-picker-row-icon img { width: 48px; height: 48px; object-fit: contain } .pet-picker-icon-empty { width: 48px; height: 48px; background: var(--bg3); border-radius: 6px } .pet-picker-row-info { flex: 1; min-width: 0 } .pet-picker-row-name { font-size: 1rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap } .pet-picker-row-meta { font-size: .78rem; color: var(--text-dim); margin-top: 4px } .pet-picker-badge { font-size: .65rem; font-weight: 700; padding: 1px 6px; border-radius: 8px; background: rgba(255,180,0,.15); color: var(--gold); border: 1px solid rgba(255,180,0,.3) } .pet-picker-badge.rec { background: rgba(38,198,218,.15); color: var(--cyan, #26c6da); border-color: rgba(38,198,218,.35) } .pet-picker-empty { text-align: center; color: var(--text-dim); padding: 32px 16px; font-size: .85rem } /* Result panel */ .pet-result-panel { background: transparent; padding: 0; margin: 0 } .pet-result-empty, .pet-result-loading, .pet-result-error { text-align: center; padding: 32px 16px; color: var(--text-dim) } .pet-result-error { color: #ff7eb6 } .pet-res-header { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 14px; flex-wrap: wrap } .pet-res-name { font-size: 1.1rem; font-weight: 700; color: var(--text) } .pet-res-qual { font-size: .85rem; font-weight: 600 } .pet-res-power { font-size: .9rem; color: var(--text-dim); margin-left: auto } .pet-res-power b { color: var(--gold) } .pet-res-combat { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 6px 12px; padding: 10px 12px; background: var(--bg3); border-radius: 8px; margin-bottom: 14px } .pet-res-combat-row { display: flex; justify-content: space-between; align-items: center; font-size: .83rem } .pet-res-combat-label { color: var(--text-dim) } .pet-res-combat-val { font-weight: 600; color: var(--text) } .pet-res-combat-val.gold { color: var(--gold) } .pet-res-section-title { font-size: .82rem; font-weight: 600; color: var(--text-dim); letter-spacing: .06em; text-transform: uppercase; margin: 14px 0 6px } .pet-res-pools { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px } .pet-res-pool-row { display: flex; justify-content: space-between; font-size: .85rem; padding: 3px 0 } .pet-res-pool-name { color: var(--text) } .pet-res-pool-val { font-weight: 700; color: var(--gold) } .pet-res-pool-val.pct { color: #3dffa0 } .pet-res-pool-src { font-size: .73rem; color: var(--text-dim); padding-left: 12px; margin-top: -2px } .pet-res-skills { display: flex; flex-direction: column; gap: 8px } .pet-res-skill { padding: 10px 12px; background: var(--bg3); border-radius: 8px; border: 1px solid var(--border) } .pet-res-skill-err { border-color: rgba(255,100,100,.3) } .pet-res-skill-err-msg { color: #ff7eb6; font-size: .78rem } .pet-res-skill-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 5px } .pet-res-skill-slot { width: 20px; height: 20px; border-radius: 50%; background: var(--bg2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: .7rem; color: var(--text-dim); flex-shrink: 0 } .pet-res-skill-icon { width: 28px; height: 28px; object-fit: contain; border-radius: 4px } .pet-res-skill-name { font-weight: 600; font-size: .88rem } .pet-res-skill-stars { color: var(--gold); font-size: .8rem } .pet-res-skill-role { font-size: .72rem; padding: 2px 7px; border-radius: 10px; background: var(--bg2); color: var(--text-dim); margin-left: auto } .pet-res-skill-role[data-type="1"] { color: var(--gold); background: rgba(255,180,0,.12) } .pet-res-skill-role[data-type="2"] { color: #b06aff; background: rgba(176,106,255,.12) } .pet-res-skill-attr { font-size: .75rem; color: var(--text-dim); margin-bottom: 2px } .pet-res-skill-pool { font-size: .75rem; color: #3dffa0; margin-bottom: 3px } .pet-res-skill-desc { font-size: .73rem; color: var(--text-dim); font-style: italic; margin-bottom: 5px; line-height: 1.4 } .pet-res-params { display: flex; flex-wrap: wrap; gap: 4px 12px } .pet-res-param { font-size: .8rem; color: var(--text) } .pet-res-param b { color: var(--gold) } .pet-res-param-base { color: var(--text-dim); font-size: .74rem } .pet-spinner { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--gold); border-radius: 50%; animation: petSpin .7s linear infinite; margin: 0 auto 10px } .pet-spinner-inline { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(26,20,0,.4); border-top-color: #1a1400; border-radius: 50%; animation: petSpin .7s linear infinite; vertical-align: middle } @keyframes petSpin { to { transform: rotate(360deg) } } .pet-loading { color: var(--text-dim); font-size: .85rem; padding: 12px 0; text-align: center } /* ─── Console-style output (matches desktop app layout) ─── */ .pet-out-console { font-family: 'Consolas','JetBrains Mono','Courier New',monospace; font-size: .84rem; color: var(--text); line-height: 1.55 } .pet-out-section { margin-bottom: 14px } .pet-out-header { color: var(--gold); font-weight: 700; font-size: .92rem; padding: 6px 0 4px; letter-spacing: .02em } .pet-out-box { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px } .pet-out-subh { color: #26c6da; font-weight: 700; margin: 10px 0 4px; font-size: .85rem; letter-spacing: .02em } .pet-out-subh:first-child { margin-top: 0 } .pet-out-kv { display: flex; gap: 14px; padding: 2px 0; flex-wrap: nowrap; align-items: baseline } .pet-out-kv .k { color: var(--text); width: 240px; min-width: 240px; flex-shrink: 0 } .pet-out-kv .v { color: var(--text); font-weight: 600; flex: 1 } .pet-out-dim { color: var(--text-dim); font-weight: 400 } .pet-out-dim-sm { color: var(--text-dim); font-weight: 400; font-size: .78rem } .pet-out-green { color: #4ade80; font-weight: 700 } .pet-out-yellow { color: #fbbf24; font-weight: 700 } .pet-out-red { color: #f87171 } .pet-out-kv.pet-kv-dmg .v { font-size: 1.05em } .pet-out-kv.pet-kv-star { background: rgba(74,222,128,.08); border-left: 3px solid #4ade80; padding: 5px 8px; margin: 4px -8px; border-radius: 3px } .pet-out-kv.pet-kv-star .k { font-weight: 700; color: #4ade80 } .pet-out-kv.pet-kv-star .v { font-size: 1.3rem; letter-spacing: .01em } .pet-out-buffs { padding: 10px 12px } /* 2-line layout luôn: dòng trên = info chính, dòng dưới = pool + base Dùng container query thay vì @media (viewport) vì output col nằm trong grid cha */ .pet-buff-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 90px; grid-template-areas: "icon name stars val" ". pool pool base"; align-items: center; gap: 3px 10px; padding: 7px 4px; border-bottom: 1px dashed rgba(255,255,255,.05) } .pet-buff-row:last-child { border-bottom: none } .pet-buff-icon { grid-area: icon; width: 26px; height: 26px; border-radius: 4px } .pet-buff-name { grid-area: name; font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .pet-buff-stars { grid-area: stars; color: var(--gold); font-size: .85rem; letter-spacing: 2px; white-space: nowrap } .pet-buff-val { grid-area: val; font-size: 1.05em; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap } .pet-buff-pool { grid-area: pool; color: var(--text-dim); font-size: .8rem; min-width: 0; line-height: 1.3 } .pet-buff-base { grid-area: base; font-size: .75rem; white-space: nowrap; text-align: right; opacity: .75 } /* Phone: stack tighter, giảm padding */ @media (max-width: 500px) { .pet-buff-row { grid-template-columns: 26px minmax(0, 1fr) auto 70px; gap: 2px 8px; padding: 6px 2px; font-size: .88em } .pet-buff-icon { width: 22px; height: 22px } .pet-buff-val { font-size: 1em } } /* Hero DPS / expected box */ .pet-out-hero { border: 1.5px solid #4ade80; border-radius: 8px; padding: 10px 16px; margin: 0 0 14px; background: rgba(74,222,128,.05) } .pet-out-hero-row { display: flex; align-items: baseline; gap: 12px; padding: 3px 0; color: #4ade80; font-weight: 700; flex-wrap: wrap } .pet-out-hero-row .lbl { min-width: 160px } .pet-out-hero-row .val { font-size: 1.15rem } .pet-out-hero-row .unit { color: var(--text-dim); font-weight: 400; font-size: .8rem } .pet-out-hero-note { color: var(--text-dim); font-size: .75rem; font-weight: 400; margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(74,222,128,.2); line-height: 1.4 } /* Stats list with mini bars */ .pet-out-stats { display: grid; grid-template-columns: 1fr; gap: 3px } .pet-out-stat-row { display: grid; grid-template-columns: 100px 50px 14px 50px 1fr; align-items: center; gap: 6px } .pet-out-stat-row .name { color: var(--text) } .pet-out-stat-row .val { color: var(--gold); font-weight: 700; text-align: right } .pet-out-stat-row .sep { color: var(--text-dim); text-align: center } .pet-out-stat-row .max { color: var(--text-dim) } .pet-out-stat-row .bar { height: 8px; background: var(--bg2); border-radius: 4px; overflow: hidden; margin-left: 8px } .pet-out-stat-row .bar-fill { display: block; height: 100%; border-radius: 4px } /* Pools */ .pet-out-pool { margin: 6px 0 10px } .pet-out-pool-head { display: flex; gap: 8px; align-items: baseline; color: var(--gold); font-weight: 700; flex-wrap: wrap } .pet-out-pool-head .name { color: var(--text); min-width: 160px } .pet-out-pool-head .eq { color: var(--text-dim) } .pet-out-pool-head .total { color: var(--gold) } .pet-out-src { color: var(--text-dim); margin-left: 26px; font-size: .82rem } .pet-out-src .pet-out-stars { color: var(--gold) } /* Skills detail */ .pet-out-skills { display: flex; flex-direction: column; gap: 12px } .pet-out-skill { background: var(--bg2); border-radius: 4px; padding: 2px 8px 6px; white-space: pre-wrap } .pet-out-skill.is-core { background: rgba(255,180,0,.05) } .pet-out-skill-err { border-left: 3px solid #f87171 } .pet-out-tree-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0; color: var(--gold) } .pet-out-skill-slot { color: #26c6da; font-weight: 700 } .pet-out-skill-icon { width: 24px; height: 24px; border-radius: 4px; object-fit: cover } .pet-out-skill-name { color: var(--text); font-weight: 700 } .pet-out-skill-stars { color: var(--gold); letter-spacing: 1px } .pet-out-skill-role { color: var(--text-dim); font-size: .82rem; font-weight: 400 } .pet-out-tree-row { font-size: .84rem; color: var(--text); padding: 1px 0; line-height: 1.45 } .pet-out-tree-row .tlabel { color: var(--text-dim) } .pet-out-tree-row .plabel { color: var(--text); display: inline-block; min-width: 160px } .pet-out-tree-row .pval { color: var(--text) } .pet-out-tree-row .pval.gold { color: var(--gold); font-weight: 700 } .pet-out-tree-desc { font-size: .82rem; color: var(--text-dim); font-style: italic; line-height: 1.5; padding-left: 4px; white-space: pre-wrap } .pet-out-tree-foot { color: var(--gold); padding: 2px 0 } .pet-out-cyan { color: #26c6da; font-weight: 600 } .pet-out-trace-calc { color: var(--text) } .pet-out-trace-calc b { color: var(--gold); font-weight: 700 } /* Skill detail cards — compact, visual */ .pet-skill-card { background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 6px; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px } .pet-skill-card.is-core { border-left-color: var(--gold); background: linear-gradient(90deg, rgba(255,180,0,.06), transparent 40%) } .pet-skill-err { border-left-color: #f87171 } .pet-skill-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap } .pet-skill-slot { color: #26c6da; font-weight: 700; font-size: .78rem; background: rgba(38,198,218,.08); padding: 2px 6px; border-radius: 4px } .pet-skill-icon { width: 28px; height: 28px; border-radius: 5px; object-fit: cover } .pet-skill-name { color: var(--text); font-weight: 700; font-size: .95rem; flex: 1 } .pet-skill-name[data-dh] { cursor: help } .pet-skill-stars { color: var(--gold); letter-spacing: 1px; font-size: .88rem } .pet-skill-role { color: var(--text-dim); font-size: .76rem; background: var(--bg2); padding: 2px 7px; border-radius: 999px } .pet-skill-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem } .pet-skill-meta .mk { color: var(--text-dim) } .pet-skill-desc { color: var(--text-dim); font-style: italic; font-size: .8rem; line-height: 1.5; padding: 4px 8px; background: var(--bg2); border-radius: 4px; white-space: pre-wrap } .pet-skill-params { border-collapse: collapse; font-size: .82rem; margin: 0 } .pet-skill-params th { color: var(--text-dim); font-weight: 500; padding: 3px 10px 3px 0; border-bottom: 1px solid var(--border); font-size: .74rem } .pet-skill-params th.t-lbl { text-align: left; padding-right: 18px } .pet-skill-params th.t-base, .pet-skill-params th.t-final { text-align: right } .pet-skill-params th.t-pct { text-align: left; padding-left: 6px } .pet-skill-params td { padding: 2px 10px 2px 0; color: var(--text); white-space: nowrap } .pet-skill-params td.plbl { color: var(--text-dim); text-align: left; padding-right: 18px } .pet-skill-params td.pbase { text-align: right; font-variant-numeric: tabular-nums; color: var(--text) } .pet-skill-params td.parrow { color: var(--text-dim); text-align: center; padding: 2px 4px } .pet-skill-params td.pfinal { color: var(--gold); text-align: right; font-variant-numeric: tabular-nums; font-weight: 700 } .pet-skill-params td.ppct { font-size: .76rem; text-align: left; padding-left: 6px } .pet-skill-params tr.changed td.plbl { color: var(--text); font-weight: 500 } .pet-skill-trace { margin-top: 4px } .pet-skill-trace > summary { color: var(--text-dim); font-size: .78rem; cursor: pointer; padding: 4px 0; user-select: none } .pet-skill-trace > summary:hover { color: var(--gold) } .pet-trace-row { padding: 4px 8px; background: var(--bg2); border-radius: 4px; margin-top: 4px; font-size: .8rem } .pet-trace-src { margin-bottom: 2px } .pet-trace-calc { font-family: 'Consolas','JetBrains Mono',monospace; font-size: .78rem } .pet-trace-calc b { color: var(--gold) } .pet-trace-calc .mk { color: var(--text-dim); font-family: inherit } /* Collapsible skill detail */ .pet-skill-details { margin-top: 6px } .pet-skill-details > summary { color: var(--text-dim); font-size: .78rem; cursor: pointer; padding: 4px 0; user-select: none; list-style: none; display: flex; align-items: center; gap: 5px } .pet-skill-details > summary::-webkit-details-marker { display: none } .pet-skill-details > summary::before { content: '▶'; font-size: .62rem; display: inline-block; transition: transform .15s; flex-shrink: 0 } .pet-skill-details[open] > summary::before { transform: rotate(90deg) } .pet-skill-details > summary:hover { color: var(--gold) } /* Skill icon wrap for tooltip trigger */ .pet-skill-icon-wrap[data-dh] { cursor: help } .pet-skill-name[data-dh] { cursor: help } /* Global skill description tooltip */ .pet-gdesc-tt { display: none; position: fixed; z-index: 9999; background: var(--bg, #0d1117); border: 1px solid var(--gold, #f0b429); border-radius: 8px; padding: 10px 14px; font-size: .82rem; color: var(--text, #e2e8f0); font-style: normal; min-width: 200px; max-width: 320px; line-height: 1.55; font-style: italic; box-shadow: 0 4px 24px rgba(0,0,0,.7); pointer-events: none; font-family: Arial, sans-serif; white-space: pre-wrap; word-break: break-word } .pet-gdesc-tt .tt-val { color: #4ade80; font-style: normal; font-weight: 700 } .pet-gdesc-tt .tt-unk { color: var(--text-dim, #6b7280); font-style: normal } /* Mobile overflow fixes */ @media (max-width: 600px) { .pet-out-kv { flex-wrap: wrap } .pet-out-kv .k { min-width: 0; width: 100%; flex-shrink: 1 } .pet-out-hero-row .lbl { min-width: 0; width: 100% } .pet-out-pool-head .name { min-width: 0 } .pet-out-console { font-size: .8rem } .pet-skill-params { font-size: .72rem } .pet-skill-params td, .pet-skill-params th { padding: 2px 4px 2px 0 } .pet-skill-params td.plbl { padding-right: 8px } } /* Computing state — subtle, no flash */ .pet-result-computing { position: relative; transition: opacity .1s } .pet-result-computing::after { content: ''; position: absolute; top: 8px; right: 8px; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--gold); border-radius: 50%; animation: petSpin .7s linear infinite; z-index: 5 } /* ════════════════════════════════════════ Alliance / Server Rankings tab ════════════════════════════════════════ */ .alc-view-toggle { display: inline-flex; gap: 2px; background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.12)); border: 1px solid var(--border); border-radius: 999px; padding: 4px; flex-wrap: wrap; box-shadow: inset 0 2px 6px rgba(0,0,0,.38), 0 1px 0 rgba(255,255,255,.04); } :root[data-theme="light"] .alc-view-toggle { background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.02)); box-shadow: inset 0 2px 5px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.6); } .alc-notice { background: rgba(91, 200, 255, .06); border: 1px solid rgba(91, 200, 255, .18); border-left: 3px solid rgba(91, 200, 255, .55); border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 3px; } .alc-notice-row { font-size: .78rem; color: var(--text); display: flex; align-items: center; gap: 6px; line-height: 1.45; } .alc-notice-ico { opacity: .85; flex-shrink: 0; } @media (max-width: 600px) { .alc-notice { padding: 7px 10px; } .alc-notice-row { font-size: .72rem; } } .alc-view-toggle .btn { padding: 7px 18px; font-size: .82rem; white-space: nowrap; border: 1px solid transparent !important; border-radius: 999px; background: transparent; color: var(--text-dim); font-weight: 600; letter-spacing: .2px; transition: color .18s ease, background .18s ease, transform .12s ease, box-shadow .18s ease; box-shadow: none; } .alc-view-toggle .btn:hover:not(.btn-primary) { color: var(--text); background: rgba(255,255,255,.04); } :root[data-theme="light"] .alc-view-toggle .btn:hover:not(.btn-primary) { background: rgba(0,0,0,.04); } .alc-view-toggle .btn.btn-primary { color: #1a1206; background: linear-gradient(180deg, #ffe07a 0%, var(--gold) 55%, #d99a13 100%) !important; border-color: rgba(255,224,122,.55) !important; box-shadow: 0 2px 8px rgba(240,180,41,.35), 0 0 0 1px rgba(255,224,122,.25) inset, 0 -1px 0 rgba(0,0,0,.18) inset; transform: translateZ(0); } :root[data-theme="light"] .alc-view-toggle .btn.btn-primary { color: #2a1d00; } .alc-view-toggle .btn.btn-primary:hover { filter: brightness(1.05); } .alc-view-toggle .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } @media (max-width: 600px) { .alc-view-toggle { display: flex; width: 100%; gap: 3px; } .alc-view-toggle .btn { flex: 1 1 0; min-width: 0; width: 0; /* belt-and-braces: force equal split regardless of intrinsic width */ padding: 7px 4px; font-size: .72rem; line-height: 1.15; white-space: normal; /* allow 2 lines if text is long */ text-align: center; word-break: keep-all; /* don't break VN words mid-character */ display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; } /* Active button: drop the outer glow shadow that visually widens it vs neighbors on tight mobile widths. */ .alc-view-toggle .btn.btn-primary { box-shadow: 0 0 0 1px rgba(255,224,122,.35) inset, 0 -1px 0 rgba(0,0,0,.15) inset !important; } } @media (max-width: 380px) { .alc-view-toggle .btn { font-size: .68rem; padding: 7px 2px; } } .alc-srv-chips { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .alc-srv-chip { display: grid; grid-template-columns: 46px auto 1fr; align-items: center; gap: 8px; padding: 6px 12px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; font-size: .78rem; line-height: 1.2; } .alc-srv-chip-name { color: var(--gold); font-weight: 700; } .alc-srv-chip-date { color: var(--text); opacity: .85; white-space: nowrap; } .alc-srv-chip-count { color: var(--text-dim); font-size: .72rem; white-space: nowrap; text-align: right; } @media (max-width: 600px) { .alc-srv-chips { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 5px; } .alc-srv-chip { padding: 5px 9px; font-size: .72rem; grid-template-columns: 38px auto 1fr; gap: 6px; } } /* Compare toolbar (season select + search) */ .alc-cmp-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; } .alc-cmp-season-sel { width: auto; font-size: .82rem; flex: 0 0 auto; } .alc-cmp-search-wrap { flex: 1 1 220px; min-width: 180px; max-width: 320px; } .alc-cmp-search-wrap .search-input { width: 100% !important; } .alc-cmp-toolbar-count { font-size: .76rem; color: var(--text-dim); margin-left: auto; white-space: nowrap; } @media (max-width: 600px) { .alc-cmp-toolbar { gap: 6px; } .alc-cmp-search-wrap { flex: 1 1 100%; max-width: none; } .alc-cmp-toolbar-count { margin-left: 0; } } /* Server pick grid (compare view) */ .alc-cmp-pickgrid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .alc-cmp-pickitem { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; cursor: pointer; color: var(--text); transition: all .15s ease; text-align: left; font-family: inherit; } .alc-cmp-pickitem:hover { border-color: var(--border-gold); transform: translateY(-1px); } .alc-cmp-pickitem.on { border-color: var(--gold); background: rgba(240, 180, 41, .08); box-shadow: 0 0 0 2px rgba(240, 180, 41, .12); } .alc-cmp-pickitem .alc-cmp-srv { font-weight: 800; font-size: 1.05rem; color: var(--gold); letter-spacing: .5px; } .alc-cmp-pickitem .alc-cmp-ally { font-size: .76rem; color: var(--text); opacity: .85; } .alc-cmp-pickitem .alc-cmp-pc { font-size: .7rem; color: var(--text-dim); } @media (max-width: 600px) { .alc-cmp-pickgrid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; } .alc-cmp-pickitem { padding: 7px 9px; } } /* Compare summary table — softer */ .alc-sum-metric { font-weight: 600; color: var(--text); opacity: .92; } .alc-sum-max { color: var(--gold-light, var(--gold)); font-weight: 700; background: rgba(240, 180, 41, .06); } .alc-sum-maxcol { font-weight: 600; color: var(--text); display: flex; align-items: baseline; gap: 6px; justify-content: flex-end; } .alc-sum-maxsrv { font-size: .68rem; color: var(--gold); opacity: .85; font-weight: 700; background: rgba(240, 180, 41, .1); padding: 1px 6px; border-radius: 4px; } /* Compare bars */ .alc-cmp-bars-scroll { max-height: 520px; overflow-y: auto; padding-right: 4px; } .alc-bars-group { margin-bottom: 14px; } .alc-bars-group:last-child { margin-bottom: 0; } .alc-bars-group-title { font-size: .82rem; font-weight: 600; color: var(--text); margin-bottom: 6px; display: flex; align-items: center; gap: 7px; padding-bottom: 4px; border-bottom: 1px dashed rgba(255, 255, 255, .07); } .alc-bars-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; } .alc-bars { display: flex; flex-direction: column; gap: 5px; } .alc-bar-row { display: grid; grid-template-columns: 60px 1fr 80px; align-items: center; gap: 10px; } .alc-bar-label { font-size: .76rem; font-weight: 600; color: var(--gold-light, var(--gold)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .alc-bar-track { background: rgba(255, 255, 255, .05); border-radius: 4px; height: 11px; overflow: hidden; } .alc-bar-fill { height: 100%; border-radius: 4px; opacity: .85; transition: width .35s ease; } .alc-bar-val { text-align: right; font-size: .76rem; font-weight: 600; color: var(--text); opacity: .92; } @media (max-width: 600px) { .alc-bar-row { grid-template-columns: 50px 1fr 65px; gap: 6px; } .alc-bar-label { font-size: .72rem; } .alc-bar-val { font-size: .72rem; } .alc-cmp-bars-scroll { max-height: 420px; } } /* Compare line chart */ .alc-line-wrap { display: flex; flex-direction: column; gap: 10px; } .alc-line-wrap svg { width: 100%; height: auto; display: block; background: rgba(255, 255, 255, .015); border-radius: 8px; } .alc-line-note { font-size: .7rem; color: var(--text-dim); text-align: center; padding: 0 6px; line-height: 1.4; } @media (max-width: 600px) { .alc-line-wrap svg { font-size: 11px; } .alc-line-note { font-size: .65rem; } } /* Compare radar */ .alc-radar-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; } .alc-radar-wrap svg { width: 100%; max-width: 360px; height: auto; display: block; } .alc-radar-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; } .alc-radar-lg { font-size: .78rem; color: var(--text); display: inline-flex; align-items: center; gap: 5px; } .alc-radar-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; } .alc-cmp-charts { grid-template-columns: 1fr 1fr; } @media (max-width: 900px) { .alc-cmp-charts { grid-template-columns: 1fr; } } /* ───────── KVK — Match Prediction ───────── */ .kvk-panel { padding: 22px 24px; } .kvk-subtitle { color: var(--text-dim); font-size: .88rem; margin: -6px 0 16px; } .kvk-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .kvk-toolbar .btn-sm { padding: 6px 14px; font-size: .82rem; } .kvk-matches { display: flex; flex-direction: column; gap: 18px; } .kvk-match { background: linear-gradient(180deg, rgba(255,77,109,.04), transparent 60%); border: 1px solid var(--border); border-radius: 14px; padding: 18px; transition: border-color .2s, box-shadow .2s; } .kvk-match:hover { border-color: rgba(255,77,109,.4); box-shadow: 0 6px 22px rgba(255,77,109,.08); } .kvk-match-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px dashed var(--border); } .kvk-match-num { font-weight: 700; color: #ff4d6d; letter-spacing: 1px; font-size: .95rem; } .btn-sm { padding: 5px 12px; font-size: .78rem; } .kvk-arena { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; } .kvk-team { background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 12px; transition: transform .25s, border-color .25s; } .kvk-team:hover { transform: translateY(-2px); } .kvk-team-a { border-left: 3px solid #4fa8ff; } .kvk-team-b { border-left: 3px solid #ff7eb6; } .kvk-team-head { display: flex; justify-content: space-between; align-items: center; } .kvk-team-name { font-weight: 700; letter-spacing: 1.5px; font-size: .95rem; } .kvk-team-a .kvk-team-name { color: #4fa8ff; } .kvk-team-b .kvk-team-name { color: #ff7eb6; } .kvk-team-count { font-size: .75rem; color: var(--text-dim); background: rgba(255,255,255,.04); padding: 2px 8px; border-radius: 10px; } .kvk-srv-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .kvk-srv-chip { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: #1c1917; font-weight: 700; padding: 4px 4px 4px 10px; border-radius: 14px; font-size: .8rem; animation: kvkChipIn .2s ease-out; } @keyframes kvkChipIn { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } } .kvk-srv-x { background: rgba(0,0,0,.25); color: #1c1917; border: none; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; font-size: .65rem; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .kvk-srv-x:hover { background: rgba(0,0,0,.5); color: #fff; } .kvk-add-wrap { position: relative; } .kvk-add-btn { background: rgba(255,77,109,.08); border: 1px dashed rgba(255,77,109,.4); color: #ff4d6d; font-weight: 600; font-size: .78rem; padding: 4px 10px; border-radius: 14px; cursor: pointer; transition: all .2s; } .kvk-add-btn:hover { background: rgba(255,77,109,.18); border-style: solid; } .kvk-picker { min-width: 220px; padding: 8px; /* Default open to the right so Team A (leftmost) isn't clipped */ left: 0; right: auto; } /* Team B sits at the right edge — flip dropdown to open leftward */ .kvk-team-b .kvk-picker { left: auto; right: 0; } .kvk-picker-search { width: 100%; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: .82rem; padding: 6px 8px; margin-bottom: 6px; } .kvk-picker-list { max-height: 240px; overflow-y: auto; } .kvk-picker-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border-radius: 6px; cursor: pointer; transition: background .15s; } .kvk-picker-item:hover { background: rgba(255,77,109,.12); } .kvk-picker-srv { font-weight: 700; color: var(--gold-light); font-size: .85rem; } .kvk-picker-meta { font-size: .72rem; color: var(--text-dim); } .kvk-picker-empty { color: var(--text-dim); padding: 10px; text-align: center; font-size: .82rem; } .kvk-stats-empty { color: var(--text-dim); font-size: .85rem; font-style: italic; text-align: center; padding: 22px 8px; border: 1px dashed var(--border); border-radius: 8px; } .kvk-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .kvk-stat-card { background: var(--bg2); border: 1px solid var(--border); border-left: 3px solid var(--m-color, var(--gold)); border-radius: 8px; padding: 8px 10px; transition: transform .2s; } .kvk-stat-card:hover { transform: translateY(-1px); } .kvk-stat-icon { font-size: .9rem; line-height: 0; display: inline-flex; align-items: center; } .kvk-stat-icon img { display: block; width: 32px; height: 32px; object-fit: contain; } .kvk-stat-label { font-size: .68rem; color: var(--text-dim); letter-spacing: .5px; text-transform: uppercase; margin-top: 2px; } .kvk-stat-value { font-size: 1rem; font-weight: 700; color: var(--text); margin-top: 2px; } .kvk-vs { display: flex; align-items: center; justify-content: center; } .kvk-vs-circle { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #ff4d6d, #ff7eb6); color: #fff; font-weight: 800; letter-spacing: 1px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 18px rgba(255,77,109,.4); animation: kvkPulse 2.4s ease-in-out infinite; } @keyframes kvkPulse { 0%, 100% { transform: scale(1); box-shadow: 0 4px 18px rgba(255,77,109,.4); } 50% { transform: scale(1.06); box-shadow: 0 6px 28px rgba(255,77,109,.6); } } .kvk-cmp-block { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); } .kvk-verdict { text-align: center; font-weight: 700; letter-spacing: 1px; font-size: .92rem; padding: 8px; border-radius: 8px; margin-bottom: 12px; } .kvk-verdict.win-a { background: rgba(79,168,255,.12); color: #4fa8ff; } .kvk-verdict.win-b { background: rgba(255,126,182,.12); color: #ff7eb6; } .kvk-verdict.tie { background: rgba(255,255,255,.04); color: var(--text-dim); } .kvk-cmp-list { display: flex; flex-direction: column; gap: 8px; } .kvk-cmp-row { display: grid; grid-template-columns: 140px 1fr 60px; gap: 10px; align-items: center; } .kvk-cmp-label { font-size: .82rem; color: var(--text-dim); display: flex; align-items: center; gap: 6px; } .kvk-cmp-icon { font-size: .95rem; line-height: 0; display: inline-flex; align-items: center; } .kvk-cmp-icon img { display: block; width: 22px; height: 22px; object-fit: contain; } .kvk-cmp-bar { display: flex; height: 26px; border-radius: 13px; overflow: hidden; background: var(--bg3); border: 1px solid var(--border); } .kvk-cmp-side { display: flex; align-items: center; padding: 0 10px; font-size: .78rem; font-weight: 700; transition: width .5s ease; white-space: nowrap; overflow: hidden; } .kvk-cmp-side.a { background: linear-gradient(90deg, rgba(79,168,255,.5), rgba(79,168,255,.2)); color: #fff; justify-content: flex-start; } .kvk-cmp-side.b { background: linear-gradient(270deg, rgba(255,126,182,.5), rgba(255,126,182,.2)); color: #fff; justify-content: flex-end; } .kvk-cmp-side.win.a { background: linear-gradient(90deg, rgba(61,255,160,.7), rgba(61,255,160,.25)); color: #053; font-weight: 800; } .kvk-cmp-side.win.b { background: linear-gradient(270deg, rgba(61,255,160,.7), rgba(61,255,160,.25)); color: #053; font-weight: 800; } .kvk-cmp-side.lose { opacity: .55; } .kvk-cmp-diff { text-align: right; font-size: .78rem; color: var(--text-dim); font-weight: 600; } .kvk-add-match-wrap { display: flex; justify-content: center; margin-top: 18px; } .kvk-add-match { letter-spacing: 1.5px; } .kvk-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #4ade80, #3dffa0); color: #053; padding: 10px 20px; border-radius: 24px; font-weight: 700; font-size: .9rem; box-shadow: 0 6px 24px rgba(61,255,160,.4); z-index: 9999; animation: kvkToastIn .25s ease-out; } @keyframes kvkToastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } } /* Mobile — stack teams vertically */ @media (max-width: 768px) { .kvk-arena { grid-template-columns: 1fr; } /* On mobile both teams are full-width — always open picker to the right */ .kvk-team-b .kvk-picker, .kvk-picker { left: 0; right: auto; } .kvk-vs { padding: 4px 0; } .kvk-vs-circle { width: 44px; height: 44px; font-size: .85rem; } .kvk-cmp-row { grid-template-columns: 100px 1fr 50px; gap: 6px; } .kvk-cmp-label { font-size: .76rem; } .kvk-cmp-bar { height: 22px; } .kvk-cmp-side { font-size: .72rem; padding: 0 6px; } .kvk-stats-grid { grid-template-columns: repeat(3, 1fr); } .kvk-stat-value { font-size: .9rem; } } /* ═════════════════════════════════════════════════════════════════════ LOADING SCREEN — fullscreen overlay, gaming/fantasy theme Tunables (override these CSS vars to recolor / retime): --ld-c1 / --ld-c2 / --ld-c3 — accent triad (gold/violet/teal) --ld-bg1 / --ld-bg2 — radial bg stops --ld-fade-ms — fade-in/out duration ═════════════════════════════════════════════════════════════════════ */ .ld-screen { --ld-c1: #ffd86b; /* gold */ --ld-c2: #b06aff; /* violet */ --ld-c3: #3dffa0; /* teal */ --ld-bg1: #0a0414; --ld-bg2: #050308; --ld-fade-ms: 420ms; position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; background: radial-gradient(ellipse at center, var(--ld-bg1) 0%, var(--ld-bg2) 75%); color: #e8e0ff; user-select: none; -webkit-user-select: none; /* none, not auto: the overlay is purely visual. If we capture clicks here Cloudflare RUM attributes the click's INP to #loadingScreen, and "next paint" gets stretched to whenever the overlay finally hides — which can show up as multi-second INP outliers. Letting clicks pass through means the underlying tab/sidebar receives them; that's fine because tab content is display:none under the overlay anyway. */ pointer-events: none; opacity: 1; transition: opacity var(--ld-fade-ms) ease; contain: layout paint; overflow: hidden; } .ld-screen.is-hiding { opacity: 0; pointer-events: none; } .ld-screen.is-hidden { display: none; } /* Vignette overlay */ .ld-screen::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, transparent 50%, rgba(0,0,0,.5) 100%); pointer-events: none; } /* Center stage holds the magic circle SVG + a small emblem */ .ld-stage { position: relative; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 0 24px rgba(176, 106, 255, .35)); animation: ld-breathe 3.6s ease-in-out infinite; will-change: transform; } .ld-magic { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .ld-magic .ld-ring { transform-origin: 100px 100px; transform-box: fill-box; will-change: transform; } .ld-magic .ld-ring-outer { animation: ld-spin 9s linear infinite; } .ld-magic .ld-ring-mid { animation: ld-spin 5s linear infinite reverse; } .ld-magic .ld-ring-inner { animation: ld-spin 14s linear infinite; } .ld-magic .ld-runes { animation: ld-pulse 2.2s ease-in-out infinite; transform-origin: 100px 100px; transform-box: fill-box; } .ld-magic .ld-core { animation: ld-glow 2.4s ease-in-out infinite; transform-origin: 100px 100px; transform-box: fill-box; } .ld-emblem { position: relative; font-size: 1.9rem; color: var(--ld-c1); text-shadow: 0 0 14px rgba(255, 216, 107, .7), 0 0 28px rgba(176, 106, 255, .4); animation: ld-pulse 2.6s ease-in-out infinite; } /* Particles: 14 small dots floating up. Positions/delays set by JS. */ .ld-particles { position: absolute; inset: 0; pointer-events: none; contain: strict; } .ld-particle { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--ld-c1); box-shadow: 0 0 8px currentColor; opacity: 0; animation: ld-float 6s linear infinite; will-change: transform, opacity; } .ld-particle.v { background: var(--ld-c2); color: var(--ld-c2); } .ld-particle.t { background: var(--ld-c3); color: var(--ld-c3); } /* Progress bar — slim, glowing, fake-progress */ .ld-progress { position: relative; width: min(280px, 60vw); height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .06); overflow: hidden; box-shadow: 0 0 12px rgba(176, 106, 255, .15); } .ld-progress-fill { position: absolute; inset: 0; width: 0%; background: linear-gradient(90deg, var(--ld-c1), var(--ld-c2), var(--ld-c3)); background-size: 200% 100%; animation: ld-shine 2.4s linear infinite; transition: width .35s cubic-bezier(.4,0,.2,1); border-radius: 2px; box-shadow: 0 0 10px rgba(255, 216, 107, .4); } /* Tip text — fades when swapped */ .ld-tip { font-size: .92rem; letter-spacing: .8px; color: rgba(232, 224, 255, .85); text-align: center; min-height: 1.4em; max-width: 90vw; transition: opacity .35s ease; text-shadow: 0 0 8px rgba(176, 106, 255, .25); } .ld-tip.is-fading { opacity: 0; } /* Reduced motion: kill spins, keep just the fade */ @media (prefers-reduced-motion: reduce) { .ld-magic .ld-ring, .ld-magic .ld-runes, .ld-magic .ld-core, .ld-emblem, .ld-stage, .ld-particle, .ld-progress-fill { animation: none !important; } } /* Mobile: slightly smaller stage */ @media (max-width: 480px) { .ld-stage { width: 160px; height: 160px; } .ld-emblem { font-size: 1.5rem; } } /* ── Keyframes ── */ @keyframes ld-spin { to { transform: rotate(360deg); } } @keyframes ld-pulse { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } } @keyframes ld-glow { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } } @keyframes ld-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } } @keyframes ld-shine { to { background-position: -200% 0; } } @keyframes ld-float { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translate3d(0, -120px, 0); opacity: 0; } } /* ── 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; } @media (min-width: 769px) { body.tlt-active .app { z-index: 250 !important; } } @media (max-width: 768px) { body.tlt-active.tlt-modal-open .app { z-index: 250 !important; } } body.tlt-active #tab-tools { min-height: 0 !important; } body.tlt-active footer, body.tlt-active .footer { display: none !important; } /* 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; } /* Desktop / tablet ≥769px: lock to viewport, no page scroll. */ @media (min-width: 769px) { body.tlt-active { overflow: hidden; } 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); } @media (min-width:769px) { .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; } /* Desktop: chừa chỗ cho .lang-pill-fab góc phải trên (top:14px right:18px, width ~52px). Padding-right tăng để nút Reset không bị đè. */ @media (min-width:769px) { .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; } @media (max-width:768px) { /* 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:300; 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:10px; box-shadow:0 16px 48px rgba(0,0,0,.6); width:min(1180px, calc(100vw - 24px)); height:min(760px, calc(100dvh - 24px)); display:flex; flex-direction:column; overflow:hidden; } .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; } /* Tablet / narrow desktop — modal still windowed but the main column is too narrow to host two side-by-side skill cells (icon + name + level combo + desc overlap each other). Stack the pair vertically and convert column divider to a top divider on the sub side. */ @media (min-width:861px) and (max-width:1100px) { /* 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; } /* Visible divider between the last main cell and the first sub cell. */ .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%; } } /* Suppress body scroll when modal is open */ body.tlt-modal-open { overflow:hidden !important; } /* ── Mobile modal: fullscreen, stack main + side vertically ── */ @media (max-width:860px) { .tlt-modal-dialog { width:100vw; height:100vh; height:100dvh; max-width:none; border-radius:0; border:none; } .tlt-modal-body { flex-direction:column; } .tlt-modal-main { flex:1 1 auto; min-height:0; } .tlt-modal-side { width:auto; flex:0 0 auto; max-height:none; height:45%; border-left:none; border-top:2px solid #c9a14a; position:relative; padding-top:24px; overflow-y:auto; -webkit-overflow-scrolling:touch; } /* Drag handle (3 stripes) — tap-and-drag to resize the bottom panel. */ .tlt-modal-resizer { position:absolute; top:0; left:0; right:0; height:22px; cursor:row-resize; touch-action:none; z-index:2; display:flex; 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; } /* Stack hero card + artifact card vertically */ .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; } /* Stack pair-mode 2 columns into a single column on phones — all main rows first, then all sub rows (no interleaving). */ .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:6px; padding-top:8px; } .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-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; } /* ── Tablet (≤1300px): wrap topbar so the long "Kết Hợp Kỹ Năng + Bảo Vật" button can't crowd the comboboxes. Left group (title + comboboxes) on row 1; right group (button + points + reset) drops to row 2 right-aligned. ── */ @media (max-width:1300px) { .tlt-topbar { flex-wrap:wrap; gap:8px 10px; min-height:0; padding:8px 12px; } .tlt-tb-left { flex:1 1 auto; min-width:0; flex-wrap:wrap; } .tlt-tb-right { flex:1 1 100%; min-width:0; flex-wrap:wrap; justify-content:flex-end; gap:8px; } .tlt-tb-hero { flex:1 1 200px; min-width:150px; max-width:none; } .tlt-rightpanel { width:260px; } .tlt-tb-faction { width:120px; } } /* ── ≤860px: shrink panel + allow hero combo to wrap full-width too ── */ @media (max-width:860px) { .tlt-rightpanel { width:240px; } .tlt-tb-hero { flex:1 1 100%; order:10; } } /* ── Mobile (≤768px): canvas + stats peek both visible on first screen. Stats panel sits below canvas in normal flow with the header + first few buff lines peeking; user pulls the page up to see the rest. ── */ @media (max-width:768px) { /* Drop the desktop `height: 100%` — on mobile the parents are auto, so 100% would resolve to 0 and break the flex chain. min-height pins the root to one viewport, which keeps the rightpanel filled even when the stats list is short. Background fills the same color as the panel so any rounding gap blends in cleanly (no black band). */ .tlt-root { height: auto; min-height: calc(100vh - 54px); min-height: calc(100dvh - 54px); background: #1a2a4a; } /* Topbar sticks just below the mobile-topbar (54px) while page scrolls. */ .tlt-topbar { position:sticky; top:54px; z-index:30; } .tlt-body { flex-direction:column; min-height:0; flex:1 1 auto; } /* Canvas leaves ~190px at bottom for the stats peek (header + 3-4 lines). 54 = mobile-topbar 96 = tlt-topbar (wrapped, 2 rows) 190 = stats peek (header + a few buff lines) */ .tlt-canvas-wrap { flex:0 0 auto; height: calc(100vh - 340px); height: calc(100dvh - 340px); min-height:280px; background:#0a1628; } /* Right panel grows to fill the remaining viewport (so an empty/short stats list doesn't leave a band at the bottom). When stats has more content, the panel grows past the viewport and the page scrolls. */ .tlt-rightpanel { width:auto; flex:1 1 auto; min-height:0; max-height:none; border-left:none; border-top:1px solid #0a1628; } .tlt-stats-body { flex:1 1 auto; overflow:visible; padding-bottom:24px; } /* Topbar adjustments. */ .tlt-tb-hero { flex:1 1 100%; max-width:none; order:10; } .tlt-tb-faction { width:auto; flex:0 1 130px; } .tlt-title { font-size:13px; margin-right:0; } .tlt-tb-lbl { font-size:11px; } .tlt-stats-hdr { padding:8px 12px 4px; font-size:12px; } } /* Phone nhỏ — peek nhỏ hơn để canvas còn đủ chỗ thao tác. */ @media (max-width:520px) { .tlt-canvas-wrap { height: calc(100vh - 300px); height: calc(100dvh - 300px); min-height:260px; } } /* ── Small phone (≤520px): even tighter ── */ @media (max-width:520px) { .tlt-topbar { padding:6px 8px; gap:6px 8px; } .tlt-tb-sel { font-size:12px; padding:4px 6px; } .tlt-tb-btn { padding:4px 8px; font-size:11px; } .tlt-points { font-size:12px; padding:0 4px; } .tlt-canvas-wrap { min-height:300px; } .tlt-rightpanel { max-height:44%; } .tlt-tooltip { font-size:11px; padding:8px 10px; } } /* Landscape phone — keep horizontal split, lock to viewport (no page scroll). */ @media (max-width:900px) and (orientation:landscape) and (max-height:520px) { body.tlt-active { overflow:hidden; } body.tlt-active .main-wrap { height: 100vh; height: 100dvh; min-height:0; } body.tlt-active .app { height:100% !important; overflow:hidden; } body.tlt-active #tab-tools { height: 100%; } .tlt-root { overflow:hidden; } .tlt-topbar { position:static; } .tlt-body { flex-direction:row; } .tlt-rightpanel { width:220px; max-height:none; flex:0 0 auto; border-left:1px solid #0a1628; border-top:none; } .tlt-canvas-wrap { flex:1; height:auto; min-height:0; } .tlt-stats-body { overflow-y:auto; flex:1; } } /* ════════ Monitor tab — admin analytics + server health ════════ */ .mon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:8px} .mon-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:18px} .mon-row .panel{padding:14px 16px} .mon-section-title{font-family:'Cinzel',serif;font-size:.92rem;letter-spacing:1.2px;color:var(--gold-light,#ffd86b);margin:6px 0 4px;text-transform:uppercase} .mon-card{position:relative;background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:12px 14px;overflow:hidden;transition:transform .12s,border-color .12s} .mon-card:hover{transform:translateY(-1px);border-color:var(--border-gold,rgba(240,180,41,.35))} .mon-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent,var(--gold));opacity:.65;border-radius:0 0 10px 10px} .mon-card-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.6px;color:var(--text-dim);margin-bottom:4px} .mon-card-val{font-family:Arial,sans-serif;font-size:1.32rem;font-weight:700;color:var(--accent,var(--gold));line-height:1.15} .mon-card-sub{font-size:.72rem;color:var(--text-dim);margin-top:3px} .mon-bar{height:8px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden;margin-top:6px} .mon-bar-fill{height:100%;border-radius:4px;transition:width .35s ease} .mon-bar-label{font-size:.74rem;color:var(--text-dim);margin-top:3px;font-family:Arial,sans-serif} .mon-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle;box-shadow:0 0 0 0 currentColor;animation:monDotPulse 1.6s ease-out infinite} .mon-dot.on{background:var(--green);color:rgba(61,255,160,.55)} .mon-dot.off{background:var(--red);color:rgba(255,68,85,.45);animation:none} @keyframes monDotPulse{0%{box-shadow:0 0 0 0 currentColor}70%{box-shadow:0 0 0 7px rgba(0,0,0,0)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}} .mon-badge{font-size:.74rem;padding:4px 10px;border-radius:999px;font-weight:600;letter-spacing:.4px} .mon-badge.live{background:rgba(61,255,160,.12);color:var(--green);border:1px solid rgba(61,255,160,.3)} .mon-badge.demo{background:rgba(240,180,41,.12);color:var(--gold-light,#ffd86b);border:1px solid rgba(240,180,41,.3)} .mon-badge.err{background:rgba(255,68,85,.12);color:#ff7888;border:1px solid rgba(255,68,85,.3)} .mon-meta{font-size:.74rem;color:var(--text-dim)} .mon-list-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:.82rem} .mon-list-rank{width:18px;font-size:.7rem;color:var(--text-dim);text-align:right} .mon-list-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mon-list-bar{flex:1;height:6px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;min-width:60px} .mon-list-bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#ffd97d);border-radius:3px;transition:width .3s ease} .mon-list-val{width:60px;text-align:right;font-family:Arial,sans-serif;font-size:.78rem;font-weight:600;color:var(--gold-light,#ffd86b)} .mon-empty{padding:18px 4px;color:var(--text-dim);text-align:center;font-size:.82rem;font-style:italic} .mon-sub{padding:14px 16px} /* HTTP status distribution bar */ .mon-statbar{display:flex;height:14px;border-radius:7px;overflow:hidden;background:rgba(255,255,255,.05);border:1px solid var(--border)} .mon-statseg{display:block;height:100%;transition:width .35s ease} .mon-statseg:hover{filter:brightness(1.15)} .mon-statlegend{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;font-size:.74rem;color:var(--text-dim)} .mon-statlegend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:middle} .mon-skel{position:relative;overflow:hidden} .mon-skel::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.05) 50%,transparent 100%);animation:monShimmer 1.2s ease-in-out infinite} @keyframes monShimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}} .mon-skel-line{height:10px;border-radius:4px;background:rgba(255,255,255,.05);margin:6px 0} .mon-skel-line.w50{width:50%} .mon-skel-line.w80{width:80%} @media (max-width:600px){ .mon-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px} .mon-card{padding:10px 12px} .mon-card-val{font-size:1.1rem} } /* ════════════ Language toggle (single flag, click to switch) ════════════ */ .lang-pill{ display:inline-flex;align-items:center;gap:5px; background:var(--bg2);border:1px solid var(--border); color:var(--text-dim);font-family:Arial,sans-serif;line-height:1; font-size:.72rem;font-weight:700;letter-spacing:.4px; padding:5px 9px;border-radius:6px;cursor:pointer; transition:background .15s,color .15s,border-color .15s,transform .15s; touch-action:manipulation; } .lang-pill .flag{ display:block;border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.08); flex-shrink:0; transition:transform .25s; } .lang-pill span{font-size:.7rem} .lang-pill:hover{ background:var(--bg3);color:var(--gold); border-color:rgba(240,180,41,.4);transform:translateY(-1px); } .lang-pill:hover .flag{transform:scale(1.08)} .lang-pill:active{transform:translateY(0)} /* Floating pill (desktop) — top-right corner */ .lang-pill-fab{ position:fixed;top:14px;right:18px;z-index:90; box-shadow:0 4px 14px rgba(0,0,0,.25); } @media (max-width:768px){ .lang-pill-fab{ display:none } } /* Mobile topbar pill — slightly smaller */ .lang-pill-mobile{padding:4px 8px;font-size:.68rem} .lang-pill-mobile span{font-size:.66rem} /* ════════════ Donate button + modal — coffee theme ════════════ */ /* Sidebar prominent button — coffee gradient (caramel/mocha), soft pulse, full width */ .donate-btn-prom{ position:relative;width:100%;display:flex;align-items:center;justify-content:center;gap:9px; background:linear-gradient(135deg,#8b5a3c 0%,#c08454 45%,#e0a978 100%); color:#fff;border:0;border-radius:10px;padding:10px 14px;cursor:pointer; font-family:Arial,sans-serif;font-size:.86rem;font-weight:700;letter-spacing:.4px; box-shadow:0 4px 14px rgba(139,90,60,.4),inset 0 1px 0 rgba(255,255,255,.18); transition:transform .15s,box-shadow .15s;overflow:hidden; margin-bottom:10px; } .donate-btn-prom:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(192,132,84,.55),inset 0 1px 0 rgba(255,255,255,.22)} .donate-btn-prom:active{transform:translateY(0)} /* Coffee cup wrapper — relative for steam positioning + glow halo */ .donate-btn-coffee{ position:relative;display:inline-flex;align-items:center;justify-content:center; width:1.4em;height:1.4em;flex-shrink:0; } .donate-btn-coffee-cup{ font-size:1.35rem;display:inline-block;line-height:1;position:relative;z-index:2; animation:donateBob 1.8s cubic-bezier(.4,0,.6,1) infinite; transform-origin:50% 85%; /* Crisp render — no blur in idle state, only sharp shadow */ filter:drop-shadow(0 1px 0 rgba(40,20,5,.55)); -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; will-change:transform; } @keyframes donateBob{ 0%,100%{transform:translateY(0) rotate(-7deg)} 25%{transform:translateY(-3px) rotate(-2deg)} 50%{transform:translateY(-5px) rotate(7deg)} 75%{transform:translateY(-3px) rotate(2deg)} } /* Glow halo BEHIND cup (separate layer — không làm cup mờ) */ .donate-btn-coffee::before{ content:'';position:absolute;left:50%;top:50%;width:130%;height:130%; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(255,200,140,.55) 0%,rgba(255,180,100,.25) 40%,transparent 70%); border-radius:50%;z-index:0;pointer-events:none; animation:donateGlow 2.4s ease-in-out infinite; } @keyframes donateGlow{ 0%,100%{opacity:.4;transform:translate(-50%,-50%) scale(.85)} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.15)} } /* Steam: 3 puffs rising from cup top — visible, staggered */ .donate-btn-steam{ position:absolute;left:50%;top:-2px;width:4px;height:9px; background:radial-gradient(ellipse at 50% 100%,rgba(255,255,255,.95) 0%,rgba(255,240,220,.5) 50%,rgba(255,255,255,0) 75%); border-radius:50%;opacity:0;pointer-events:none;z-index:3; animation:donateSteam 1.6s ease-out infinite; } .donate-btn-steam-1{margin-left:-6px;animation-delay:0s;width:4px;height:9px} .donate-btn-steam-2{margin-left:-1px;animation-delay:.55s;width:5px;height:11px} .donate-btn-steam-3{margin-left:4px;animation-delay:1.1s;width:3px;height:8px} @keyframes donateSteam{ 0%{opacity:0;transform:translateY(2px) translateX(0) scale(.5)} 20%{opacity:1} 60%{opacity:.65;transform:translateY(-12px) translateX(2px) scale(1.4)} 100%{opacity:0;transform:translateY(-22px) translateX(-2px) scale(1.8)} } .donate-btn-pulse{ position:absolute;inset:0;border-radius:10px; background:radial-gradient(circle at 50% 50%,rgba(255,220,180,.22) 0%,transparent 65%); opacity:0;animation:donatePulse 3.2s ease-out infinite;pointer-events:none; } @keyframes donatePulse{0%{opacity:0;transform:scale(.96)}45%{opacity:.5}100%{opacity:0;transform:scale(1.06)}} /* Mobile topbar theme toggle button */ .topbar-theme-btn { position: relative; background: transparent; border: 0; cursor: pointer; padding: 0; border-radius: 8px; width: 34px; height: 34px; flex-shrink: 0; transition: background .15s, transform .12s; -webkit-tap-highlight-color: transparent; color: var(--text-dim); } .topbar-theme-btn:hover { background: var(--ov-hover); color: var(--text); } .topbar-theme-btn:active { transform: scale(.9); } /* Moon (dark) + Sun (light) via ::before / ::after, both centered */ .topbar-theme-btn::before, .topbar-theme-btn::after { content: ''; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; background: currentColor; transition: opacity .2s ease, transform .25s ease; } .topbar-theme-btn::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 8.5A6 6 0 1 1 7.5 2.5a4.5 4.5 0 0 0 6 6z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 8.5A6 6 0 1 1 7.5 2.5a4.5 4.5 0 0 0 6 6z'/%3E%3C/svg%3E") center/contain no-repeat; opacity: 1; transform: scale(1) rotate(0deg); } .topbar-theme-btn::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' d='M12 2v3M12 19v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M2 12h3M19 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' d='M12 2v3M12 19v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M2 12h3M19 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12'/%3E%3C/svg%3E") center/contain no-repeat; opacity: 0; transform: scale(0.6) rotate(60deg); } [data-theme="light"] .topbar-theme-btn { color: #c07800; } [data-theme="light"] .topbar-theme-btn::before { opacity: 0; transform: scale(0.6) rotate(-60deg); } [data-theme="light"] .topbar-theme-btn::after { opacity: 1; transform: scale(1) rotate(0deg); } /* Hidden on desktop where sidebar toggle is always visible */ @media (min-width: 769px) { .topbar-theme-btn { display: none; } } /* Mobile topbar coffee icon */ .topbar-donate{ margin-left:auto;background:transparent;border:0;cursor:pointer; font-size:1.4rem;padding:6px 10px;border-radius:8px; transition:background .15s;line-height:1; animation:donateBob 1.8s cubic-bezier(.4,0,.6,1) infinite, donateTopbarGlow 2.4s ease-in-out infinite; transform-origin:50% 85%; -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision; } @keyframes donateTopbarGlow{ 0%,100%{filter:drop-shadow(0 1px 0 rgba(40,20,5,.5))} 50%{filter:drop-shadow(0 1px 0 rgba(40,20,5,.5)) drop-shadow(0 0 8px rgba(255,200,140,.7))} } .topbar-donate:hover{background:rgba(192,132,84,.22)} .topbar-donate:active{animation:none;transform:scale(.92)} /* Modal overlay */ .donate-modal{ position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center; background:rgba(5,8,16,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); padding:20px; } .donate-modal.open{display:flex;animation:donateFadeIn .25s ease-out} @keyframes donateFadeIn{from{opacity:0}to{opacity:1}} .donate-modal-card{ position:relative;width:100%;max-width:380px; background:linear-gradient(180deg,#1a1410 0%,#10100a 100%); border:1px solid rgba(192,132,84,.35);border-radius:18px; padding:28px 24px 22px;text-align:center; box-shadow:0 24px 64px rgba(139,90,60,.22),0 0 0 1px rgba(192,132,84,.08),inset 0 1px 0 rgba(255,255,255,.04); animation:donateCardIn .35s cubic-bezier(.2,.9,.3,1.2); max-height:calc(100vh - 40px);overflow-y:auto; } @keyframes donateCardIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}} /* The donate card has a hardcoded warm-dark gradient background that does NOT flip with the theme. Use fixed light text colors here so the contents stay readable in both dark and light themes (var(--text) would turn dark on the dark card in light theme — the "trùng màu" bug). */ .donate-modal-close{ position:absolute;top:10px;right:12px;background:transparent;border:0;color:rgba(255,255,255,.55); font-size:1.05rem;cursor:pointer;padding:6px 10px;border-radius:6px;line-height:1; transition:background .15s,color .15s; } .donate-modal-close:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.95)} .donate-modal-title{ margin-top:6px; font-family:'Cinzel',serif;font-size:1.05rem;letter-spacing:1.5px; color:#e0a978;font-weight:700;margin-bottom:8px;text-transform:uppercase; } .donate-modal-desc{font-size:.85rem;color:rgba(255,255,255,.7);line-height:1.55;margin-bottom:16px;padding:0 4px} .donate-modal-qr{ display:inline-block;background:#fff;padding:10px;border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 0 1px rgba(192,132,84,.2); margin-bottom:14px; } .donate-modal-qr img{display:block;width:240px;height:auto;max-width:100%;border-radius:6px} .donate-modal-hint{ font-size:.82rem;color:#ffd86b;font-weight:600;margin-bottom:10px; } .donate-modal-thanks{ font-size:.82rem;color:rgba(255,255,255,.88);line-height:1.55;margin-bottom:14px; padding:10px 14px;background:rgba(192,132,84,.12);border:1px solid rgba(192,132,84,.28); border-radius:10px; } .donate-modal-intl{font-size:.74rem;color:rgba(255,255,255,.6);line-height:1.6} .donate-modal-intl a{color:#7cc6ff;text-decoration:none;font-weight:600;margin-left:4px} .donate-modal-intl a:hover{text-decoration:underline;color:#a5dbff} /* Hide topbar donate icon on desktop where sidebar button is visible */ @media (min-width:901px){ .topbar-donate{display:none} } @media (max-width:600px){ .donate-modal-qr img{width:200px} .donate-modal-card{padding:24px 18px 18px} } /* ════════════ About tab ════════════ */ .about-wrap{max-width:860px;margin:0 auto;padding:0 0 60px;animation:aboutFadeIn .45s ease both} @keyframes aboutFadeIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} .about-header{position:relative;text-align:center;padding:52px 24px 44px;margin-bottom:28px;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#0d0f1a 0%,#12102a 50%,#0d1520 100%);border:1px solid var(--border)} .about-header::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 20% 50%,rgba(176,106,255,.13) 0%,transparent 70%),radial-gradient(ellipse 50% 60% at 80% 40%,rgba(61,255,160,.09) 0%,transparent 70%);pointer-events:none} .about-header-title{font-family:Arial,sans-serif;font-size:clamp(1.7rem,4.5vw,2.4rem);font-weight:700;letter-spacing:3px;text-transform:uppercase;background:linear-gradient(90deg,#b06aff,#3dffa0 60%,#4fa8ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:10px} .about-header-sub{font-family:Arial,sans-serif;font-size:1rem;font-weight:600;color:var(--text-dim);letter-spacing:2px;text-transform:uppercase} .about-header-glow{position:absolute;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(176,106,255,.18) 0%,transparent 70%);top:-60px;left:-40px;pointer-events:none} .about-header-glow2{position:absolute;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(61,255,160,.12) 0%,transparent 70%);bottom:-50px;right:-30px;pointer-events:none} .about-section-title{font-size:1rem;font-weight:700;color:var(--text-dim);letter-spacing:2px;text-transform:uppercase;margin:36px 0 14px} .about-person-card{display:flex;align-items:center;gap:24px;background:var(--bg3);border:1px solid var(--border);border-radius:16px;padding:24px 28px;margin-bottom:16px;min-height:198px;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;animation:cardSlide .5s ease both} .about-person-card:nth-child(2){animation-delay:.07s} .about-person-card:nth-child(3){animation-delay:.14s} @keyframes cardSlide{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} .about-person-card:hover{transform:translateY(-3px);border-color:rgba(176,106,255,.4);box-shadow:0 8px 32px rgba(176,106,255,.12),0 2px 8px rgba(0,0,0,.3)} .about-avatar{flex-shrink:0;width:82px;height:82px;border-radius:50%;border:2.5px solid rgba(176,106,255,.5);box-shadow:0 0 18px rgba(176,106,255,.25),0 0 6px rgba(176,106,255,.15);background:linear-gradient(135deg,#1e1535,#2a1a4a);display:flex;align-items:center;justify-content:center;font-size:1.7rem;font-weight:800;color:#b06aff;overflow:hidden;position:relative} .about-avatar.green{border-color:rgba(61,255,160,.5);box-shadow:0 0 18px rgba(61,255,160,.22),0 0 6px rgba(61,255,160,.12);background:linear-gradient(135deg,#0d2520,#0f3028);color:#3dffa0} .about-avatar picture{display:block;width:100%;height:100%} .about-avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%} .about-card-body{flex:1;min-width:0} .about-card-name{font-size:1.05rem;font-weight:700;color:var(--text);margin-bottom:6px} .about-card-desc{font-size:.85rem;color:var(--text-dim);line-height:1.65;margin-bottom:10px} .about-card-tags{display:flex;flex-wrap:wrap;gap:6px} .about-tag{font-size:.72rem;padding:3px 10px;border-radius:20px;border:1px solid rgba(176,106,255,.3);color:#b06aff;background:rgba(176,106,255,.08);letter-spacing:.3px} .about-tag.green{border-color:rgba(61,255,160,.3);color:#3dffa0;background:rgba(61,255,160,.07)} .about-tag.blue{border-color:rgba(79,168,255,.3);color:#4fa8ff;background:rgba(79,168,255,.07)} .about-services-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:8px} @media (max-width:580px){.about-services-grid{grid-template-columns:1fr}} .about-service-card{background:var(--bg3);border:1px solid var(--border);border-radius:14px;padding:22px 22px 18px;display:flex;flex-direction:column;gap:8px;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;animation:cardSlide .5s ease both} .about-service-card:nth-child(1){animation-delay:.1s} .about-service-card:nth-child(2){animation-delay:.18s} .about-service-card:hover{transform:translateY(-3px);border-color:rgba(79,168,255,.35);box-shadow:0 8px 28px rgba(79,168,255,.1)} .about-service-icon{font-size:1.6rem} .about-service-title{font-size:.95rem;font-weight:700;color:var(--text)} .about-service-desc{font-size:.82rem;color:var(--text-dim);line-height:1.6;flex:1} .about-service-contact{font-size:.82rem;color:#4fa8ff;font-weight:600;margin-top:4px} .about-btn{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:8px 18px;border-radius:8px;border:1px solid rgba(114,137,218,.45);background:rgba(114,137,218,.1);color:#8ca0e8;font-size:.8rem;font-weight:600;cursor:pointer;text-decoration:none;transition:background .2s,border-color .2s,box-shadow .2s,transform .15s;width:fit-content} .about-btn:hover{background:rgba(114,137,218,.22);border-color:rgba(114,137,218,.7);box-shadow:0 0 14px rgba(114,137,218,.25);transform:translateY(-1px);color:#a8bcf8} .about-donate-card{background:linear-gradient(135deg,#0e1220,#12102a 60%,#0a1a14);border:1px solid rgba(240,180,41,.25);border-radius:16px;padding:28px 28px 24px;text-align:center;position:relative;overflow:hidden;animation:cardSlide .5s ease .2s both} .about-donate-card::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(240,180,41,.07) 0%,transparent 65%);pointer-events:none} .about-donate-title{font-family:Arial,sans-serif;font-size:1.4rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:10px} .about-donate-desc{font-size:.86rem;color:var(--text-dim);line-height:1.7;max-width:520px;margin:0 auto 22px} .about-donate-qr-wrap{display:inline-flex;flex-direction:column;align-items:center;gap:14px} .about-donate-bank-info{font-size:.88rem;color:var(--text);font-weight:700;letter-spacing:.5px;line-height:1.6} .about-donate-bank-info span{display:block;font-size:.78rem;font-weight:500;color:var(--text-dim);letter-spacing:1px} .about-donate-qr{width:220px;margin:0 auto;border-radius:14px;border:2px solid rgba(240,180,41,.35);box-shadow:0 0 28px rgba(240,180,41,.15),0 4px 16px rgba(0,0,0,.4);background:#fff;overflow:hidden} .about-donate-qr img{width:100%;display:block;border-radius:12px} .about-footer{text-align:center;margin-top:44px;padding-top:24px;border-top:1px solid var(--border);color:var(--text-dim);font-size:.82rem;letter-spacing:.5px} @media (max-width:600px){ .about-person-card{flex-direction:column;align-items:flex-start;gap:16px;padding:20px;min-height:280px} .about-avatar{width:68px;height:68px;font-size:1.4rem} .about-donate-card{padding:22px 16px 20px} } /* ════════════════════════════════════════════════════ Community tab (News + Feedback) ════════════════════════════════════════════════════ */ .cmty-wrap{max-width:920px;margin:0 auto;padding:0 4px 32px} /* Community: dùng trọn bề ngang vùng nội dung (cả Bảng Tin & Góp Ý) */ .cmty-wrap-wide{max-width:none} .cmty-wrap-wide .cmty-chat{height:calc(100vh - 240px);min-height:440px} .cmty-header{padding:18px 4px 8px;text-align:left} .cmty-header-title{font-size:1.45rem;font-weight:700;color:var(--gold);letter-spacing:.3px;background:linear-gradient(90deg,var(--gold),#3dffa0 80%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .cmty-header-sub{margin-top:6px;font-size:.86rem;color:var(--text-dim)} .cmty-tabs{display:flex;gap:6px;margin:14px 0 18px;border-bottom:1px solid var(--border);padding-bottom:0;position:relative} .cmty-tab{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;background:transparent;border:0;border-bottom:2px solid transparent;color:var(--text-dim);font-size:.92rem;font-weight:600;cursor:pointer;transition:color .18s,border-color .18s,background .18s;font-family:inherit} .cmty-tab:hover{color:var(--text);background:rgba(61,255,160,.04)} .cmty-tab.active{color:#3dffa0;border-bottom-color:#3dffa0} .cmty-tab-icon{font-size:1rem;line-height:1} .cmty-panel{min-height:60vh} .cmty-loading,.cmty-empty,.cmty-error,.cmty-news-end{padding:40px 14px;text-align:center;color:var(--text-dim);font-size:.92rem} .cmty-error{color:#ff6b6b} .cmty-empty-icon{font-size:2.4rem;margin-bottom:8px;opacity:.6} .cmty-empty-title{font-size:1.05rem;font-weight:600;color:var(--text);margin-bottom:4px} .cmty-empty-sub{font-size:.85rem;color:var(--text-dim)} /* Toolbar */ .cmty-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;align-items:center} .cmty-search-input{flex:1;min-width:200px;padding:9px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.9rem;font-family:inherit;transition:border-color .15s,background .15s} .cmty-search-input:focus{outline:none;border-color:rgba(61,255,160,.5);background:var(--bg3)} .cmty-search-input::placeholder{color:var(--text-dim);opacity:.7} .cmty-select{padding:9px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.88rem;font-family:inherit;cursor:pointer;transition:border-color .15s,background .15s} .cmty-select:hover{background:var(--bg3)} .cmty-select:focus{outline:none;border-color:rgba(61,255,160,.5)} /* News list */ .cmty-news-list{display:flex;flex-direction:column;gap:14px} /* Post card */ .cmty-post{position:relative;background:linear-gradient(180deg,var(--bg2),rgba(20,24,38,.6));border:1px solid var(--border);border-left:3px solid var(--cat-color,#3dffa0);border-radius:12px;padding:18px 18px 14px;transition:transform .18s,border-color .18s,box-shadow .18s} .cmty-post:hover{transform:translateY(-1px);border-color:rgba(61,255,160,.3);box-shadow:0 4px 18px rgba(0,0,0,.25)} .cmty-post.pinned{background:linear-gradient(180deg,rgba(240,180,41,.06),rgba(20,24,38,.5));border-color:rgba(240,180,41,.35);border-left-color:var(--gold)} .cmty-post-pin{position:absolute;top:12px;right:14px;font-size:1.1rem;opacity:.85;animation:cmtyPinSpin 6s ease-in-out infinite} @keyframes cmtyPinSpin{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}} .cmty-post-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;font-size:.78rem} .cmty-post-cat{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;background:color-mix(in srgb,var(--cat-color,#3dffa0) 12%,transparent);color:var(--cat-color,#3dffa0);border:1px solid color-mix(in srgb,var(--cat-color,#3dffa0) 35%,transparent);border-radius:999px;font-size:.74rem;font-weight:600;letter-spacing:.3px} .cmty-post-time{color:var(--text-dim);font-size:.78rem} .cmty-post-updated{color:var(--text-dim);font-size:.74rem;font-style:italic} /* Badge */ .cmty-badge{padding:2px 8px;border-radius:4px;font-size:.68rem;font-weight:800;letter-spacing:.6px} .cmty-badge-new{background:linear-gradient(135deg,#3dffa0,#00b4d8);color:#0a1628;box-shadow:0 0 10px rgba(61,255,160,.25)} .cmty-badge-hot{background:linear-gradient(135deg,#ff5e62,#ff9966);color:#fff;box-shadow:0 0 10px rgba(255,94,98,.3);animation:cmtyHotPulse 1.8s ease-in-out infinite} .cmty-badge-fix{background:linear-gradient(135deg,#4fa8ff,#8e7cff);color:#fff} .cmty-badge-update{background:linear-gradient(135deg,#ffa940,#ffc857);color:#1a1f2e} @keyframes cmtyHotPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.2)}} .cmty-post-title{font-size:1.05rem;font-weight:700;color:var(--text);margin:0 0 6px;line-height:1.35;letter-spacing:.2px} .cmty-post-body{font-size:.92rem;line-height:1.6;color:var(--text);opacity:.92;white-space:pre-wrap;word-wrap:break-word} .cmty-post-foot{margin-top:12px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.06);font-size:.76rem;color:var(--text-dim)} .cmty-post-author{font-weight:500} /* Skeleton loading state — reserved height matches real cards to prevent CLS */ .cmty-post-skel{border-left-color:rgba(255,255,255,.08);pointer-events:none} .cmty-post-skel:hover{transform:none;border-color:var(--border);box-shadow:none} .cmty-skel-chip{display:inline-block;width:78px;height:18px;border-radius:999px;background:rgba(255,255,255,.06)} .cmty-skel-chip-sm{width:54px} .cmty-skel-line{height:14px;border-radius:6px;background:rgba(255,255,255,.05);margin-top:10px} .cmty-skel-line-title{height:18px;width:62%;margin-top:4px} .cmty-skel-line-short{width:76%} .cmty-post-skel .cmty-skel-chip, .cmty-post-skel .cmty-skel-line{position:relative;overflow:hidden} .cmty-post-skel .cmty-skel-chip::after, .cmty-post-skel .cmty-skel-line::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.06) 50%,transparent 100%);animation:cmtySkelShimmer 1.4s linear infinite} @keyframes cmtySkelShimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}} /* Load more */ .cmty-news-more{margin-top:22px;text-align:center} .cmty-loadmore{padding:10px 22px;background:linear-gradient(135deg,rgba(61,255,160,.12),rgba(176,106,255,.12));border:1px solid rgba(61,255,160,.3);border-radius:8px;color:#3dffa0;font-size:.88rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .18s} .cmty-loadmore:hover{background:linear-gradient(135deg,rgba(61,255,160,.22),rgba(176,106,255,.2));border-color:rgba(61,255,160,.55);transform:translateY(-1px)} /* Coming-soon (Feedback placeholder) */ .cmty-coming{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;min-height:50vh} .cmty-coming-stage{position:relative;width:180px;height:180px;margin-bottom:24px;display:flex;align-items:center;justify-content:center} .cmty-coming-ring{position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:#3dffa0;animation:cmtySpin 3s linear infinite} .cmty-coming-ring-2{inset:16px;border-top-color:#b06aff;border-right-color:#b06aff;animation-duration:2.2s;animation-direction:reverse} .cmty-coming-ring-3{inset:32px;border-top-color:#ffa940;animation-duration:1.6s} .cmty-coming-core{position:relative;font-size:2.4rem;animation:cmtyBob 2.4s ease-in-out infinite;text-shadow:0 0 18px rgba(61,255,160,.4)} @keyframes cmtySpin{to{transform:rotate(360deg)}} @keyframes cmtyBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} .cmty-coming-title{font-size:1.15rem;font-weight:700;color:var(--text);margin-bottom:6px;background:linear-gradient(90deg,#3dffa0,#b06aff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .cmty-coming-sub{font-size:.9rem;color:var(--text-dim);max-width:380px;line-height:1.5} /* Mobile */ @media (max-width:600px){ .cmty-wrap{padding:0 8px 24px} .cmty-header-title{font-size:1.2rem} .cmty-toolbar{flex-direction:column;align-items:stretch} .cmty-search-wrap{min-width:0} .cmty-select{width:100%} .cmty-post{padding:14px 14px 12px} .cmty-post-title{font-size:.98rem} .cmty-post-body{font-size:.88rem} .cmty-coming-stage{width:140px;height:140px} .cmty-coming-ring-2{inset:14px} .cmty-coming-ring-3{inset:28px} } /* Light theme tweaks */ [data-theme="light"] .cmty-post{background:linear-gradient(180deg,#fff,#fafafa)} [data-theme="light"] .cmty-post.pinned{background:linear-gradient(180deg,#fff7e0,#fffaf0)} [data-theme="light"] .cmty-search-input,[data-theme="light"] .cmty-select{background:#fff} /* ───────── Feedback chat (community.js) ───────── */ /* Login gate */ .cmty-chat-gate{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:54px 20px;min-height:46vh} .cmty-chat-gate-icon{font-size:3rem;margin-bottom:14px;filter:drop-shadow(0 0 16px rgba(61,255,160,.35))} .cmty-chat-gate-title{font-size:1.18rem;font-weight:700;color:var(--text);margin-bottom:6px} .cmty-chat-gate-sub{font-size:.9rem;color:var(--text-dim);max-width:360px;line-height:1.55;margin-bottom:20px} .cmty-chat-gate-btn{padding:11px 26px;border:none;border-radius:10px;font-size:.95rem;font-weight:700;cursor:pointer;color:#06120c;background:linear-gradient(135deg,#3dffa0,#2bd98a);box-shadow:0 6px 18px rgba(61,255,160,.28);transition:transform .12s,box-shadow .12s} .cmty-chat-gate-btn:hover{transform:translateY(-1px);box-shadow:0 9px 24px rgba(61,255,160,.4)} .cmty-chat-gate-btn:active{transform:translateY(0)} /* Chat shell */ .cmty-chat{position:relative;display:flex;flex-direction:column;height:min(68vh,640px);border:1px solid var(--border);border-radius:14px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.012),transparent)} .cmty-chat-msgs{flex:1;overflow-y:auto;overflow-x:hidden;padding:14px 14px 6px;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain} .cmty-chat-msgs::-webkit-scrollbar{width:8px} .cmty-chat-msgs::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px} .cmty-chat-skel{margin:auto;color:var(--text-dim);font-size:.9rem;padding:30px 0} /* Load older */ .cmty-chat-older{align-self:center;margin:2px auto 6px;padding:6px 16px;font-size:.82rem;font-weight:600;color:var(--text-dim);background:rgba(120,136,170,.1);border:1px solid var(--border);border-radius:20px;cursor:pointer;transition:background .15s,color .15s} .cmty-chat-older:hover{background:rgba(61,255,160,.12);color:#3dffa0} /* Empty */ .cmty-chat-empty{margin:auto;text-align:center;color:var(--text-dim);padding:30px 10px} .cmty-chat-empty .cmty-empty-icon{font-size:2.4rem;margin-bottom:8px;opacity:.8} .cmty-chat-empty .cmty-empty-title{font-weight:700;color:var(--text);margin-bottom:4px} .cmty-chat-empty .cmty-empty-sub{font-size:.85rem} /* Message rows */ .cmty-chat-row{display:flex;align-items:flex-end;gap:8px;max-width:84%} .cmty-chat-row.mine{margin-left:auto;flex-direction:row-reverse} .cmty-chat-avatar{flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3);user-select:none} .cmty-chat-bubble-wrap{display:flex;flex-direction:column;min-width:0} .cmty-chat-row.mine .cmty-chat-bubble-wrap{align-items:flex-end} .cmty-chat-meta{display:flex;align-items:center;gap:6px;margin:0 4px 3px;font-size:.72rem;line-height:1} .cmty-chat-name{font-weight:700;color:var(--text);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cmty-chat-row.mine .cmty-chat-name{color:#3dffa0} .cmty-chat-time{color:var(--text-dim);font-size:.68rem;flex:0 0 auto} .cmty-chat-vip{flex:0 0 auto;font-size:.62rem;font-weight:800;letter-spacing:.4px;color:#1a1300;background:linear-gradient(135deg,#ffd75e,#f0b429);padding:1px 5px;border-radius:6px;box-shadow:0 1px 4px rgba(240,180,41,.4)} /* Rank badges (danh hiệu) — hiệu ứng shine + gradient động + glow */ .cmty-chat-rank{position:relative;overflow:hidden;flex:0 0 auto;display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.4px;padding:1px 7px;border-radius:6px;white-space:nowrap;background-size:220% 220%} .cmty-chat-rank::after{content:"";position:absolute;top:0;left:-160%;width:55%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.8),transparent);transform:skewX(-20deg);animation:rankShine 3.6s ease-in-out infinite;pointer-events:none} .cmty-chat-rank.r-vip1{color:#1a1300;background-image:linear-gradient(120deg,#ffe27a,#f0b429,#ffd75e);animation:rankGrad 5s ease infinite,rankGlowGold 2.6s ease-in-out infinite} .cmty-chat-rank.r-vip2{color:#fff;text-shadow:0 1px 2px rgba(60,0,120,.5);background-image:linear-gradient(120deg,#d6a0ff,#8b3dff,#b06aff);animation:rankGrad 4s ease infinite,rankGlowPurple 2.2s ease-in-out infinite} .cmty-chat-rank.r-admin{color:#fff;text-shadow:0 1px 2px rgba(120,0,0,.55);background-image:linear-gradient(120deg,#ff9a9a,#e53935,#ff5a5a);animation:rankGrad 3s ease infinite,rankGlowRed 1.5s ease-in-out infinite,rankPulse 1.5s ease-in-out infinite} .cmty-chat-rank.r-admin::after{animation-duration:2.3s} @keyframes rankShine{0%{left:-160%}45%,100%{left:160%}} @keyframes rankGrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} @keyframes rankGlowGold{0%,100%{box-shadow:0 0 3px rgba(240,180,41,.5)}50%{box-shadow:0 0 11px rgba(255,200,60,.95)}} @keyframes rankGlowPurple{0%,100%{box-shadow:0 0 3px rgba(160,92,255,.5)}50%{box-shadow:0 0 13px rgba(190,120,255,1)}} @keyframes rankGlowRed{0%,100%{box-shadow:0 0 4px rgba(229,57,53,.6)}50%{box-shadow:0 0 15px rgba(255,90,90,1)}} @keyframes rankPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}} @media (prefers-reduced-motion:reduce){.cmty-chat-rank,.cmty-chat-rank::after{animation:none!important}} .cmty-chat-bubble{padding:8px 12px;border-radius:14px;font-size:.9rem;line-height:1.45;color:var(--text);background:rgba(120,136,170,.14);border:1px solid var(--border);border-bottom-left-radius:4px;word-break:break-word;overflow-wrap:anywhere} .cmty-chat-row.mine .cmty-chat-bubble{color:var(--mine-fg,#06120c);background:var(--mine-bg,linear-gradient(135deg,#3dffa0,#2bd98a));border-color:transparent;border-bottom-left-radius:14px;border-bottom-right-radius:4px;font-weight:500} /* New-message jump pill */ .cmty-chat-newpill{position:absolute;left:50%;transform:translateX(-50%);bottom:84px;padding:6px 16px;font-size:.8rem;font-weight:700;color:#06120c;background:linear-gradient(135deg,#3dffa0,#2bd98a);border:none;border-radius:20px;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.3);z-index:3;animation:cmtyFadeUp .2s ease} @keyframes cmtyFadeUp{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}} /* Jump-to-latest button — hiện khi cuộn lên xem tin cũ */ .cmty-chat-jump{position:absolute;right:16px;bottom:88px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:50%;background:var(--bg);color:#3dffa0;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.4);z-index:4;animation:cmtyFadeUp2 .18s ease;transition:transform .12s,background .15s,border-color .15s} .cmty-chat-jump:hover{transform:translateY(-2px);background:linear-gradient(rgba(61,255,160,.16),rgba(61,255,160,.16)),var(--bg);border-color:#3dffa0} .cmty-chat-jump[hidden]{display:none} @keyframes cmtyFadeUp2{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} /* Composer */ .cmty-chat-composer{flex:0 0 auto;border-top:1px solid var(--border);padding:8px 10px 10px;background:var(--bg)} .cmty-chat-bar{display:flex;align-items:center;gap:8px;min-height:16px;margin:0 2px 6px;font-size:.76rem} .cmty-chat-quota{color:var(--text-dim);font-weight:600} .cmty-chat-quota-vip{color:#f0b429;font-weight:700} .cmty-chat-quota-out,.cmty-chat-quota-ban{color:#ff6b6b;font-weight:700} .cmty-chat-err{color:#ff6b6b;font-weight:600} .cmty-chat-inputrow{display:flex;align-items:flex-end;gap:8px} .cmty-chat-input{flex:1;resize:none;max-height:130px;min-height:42px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:rgba(120,136,170,.08);color:var(--text);font-size:16px;line-height:1.4;font-family:inherit;outline:none;overflow-y:hidden;transition:border-color .15s} .cmty-chat-input:focus{border-color:#3dffa0} .cmty-chat-input:disabled{opacity:.55;cursor:not-allowed} .cmty-chat-send{flex:0 0 auto;padding:0 18px;height:42px;border:none;border-radius:12px;font-size:.9rem;font-weight:700;cursor:pointer;color:#06120c;background:linear-gradient(135deg,#3dffa0,#2bd98a);transition:transform .12s,opacity .15s;white-space:nowrap} .cmty-chat-send:hover:not(:disabled){transform:translateY(-1px)} .cmty-chat-send:disabled{opacity:.5;cursor:not-allowed} /* Bỏ viền focus vuông mặc định trên mọi nút trong khung chat */ .cmty-chat-send,.cmty-chat-jump,.cmty-chat-color-btn,.cmty-chat-emoji,.cmty-chat-swatch,.cmty-chat-older,.cmty-chat-newpill,.cmty-chat-gate-btn,.cmty-chat-input{outline:none;-webkit-tap-highlight-color:transparent} .cmty-chat-send:focus,.cmty-chat-jump:focus,.cmty-chat-color-btn:focus,.cmty-chat-older:focus,.cmty-chat-newpill:focus,.cmty-chat-gate-btn:focus{outline:none} /* Emoji picker */ .cmty-chat-emoji-wrap{position:relative;flex:0 0 auto} .cmty-chat-emoji-btn{width:42px;height:42px;border:1px solid var(--border);border-radius:12px;background:rgba(120,136,170,.08);font-size:1.25rem;line-height:1;cursor:pointer;transition:border-color .15s,background .15s;padding:0;outline:none;-webkit-tap-highlight-color:transparent;appearance:none;-webkit-appearance:none} .cmty-chat-emoji-btn:hover,.cmty-chat-emoji-btn:focus,.cmty-chat-emoji-btn:focus-visible{border-color:#3dffa0;background:rgba(61,255,160,.08);outline:none} .cmty-chat-emoji-panel{position:absolute;bottom:52px;right:0;width:300px;max-width:78vw;max-height:240px;overflow-y:auto;padding:8px;background:var(--bg);border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.45);display:grid;grid-template-columns:repeat(8,1fr);gap:2px;z-index:5} .cmty-chat-emoji-panel[hidden]{display:none} .cmty-chat-emoji{border:none;background:transparent;font-size:1.25rem;line-height:1;padding:5px 0;border-radius:8px;cursor:pointer;transition:background .12s} .cmty-chat-emoji:hover{background:rgba(61,255,160,.15)} [data-theme="light"] .cmty-chat-emoji-btn{background:#fff} @media (max-width:640px){ .cmty-chat-emoji-panel{grid-template-columns:repeat(7,1fr)} } /* Bubble color picker */ .cmty-chat-color-wrap{position:relative;display:inline-flex;margin-left:auto} .cmty-chat-color-btn{display:inline-flex;align-items:center;gap:5px;border:none;background:transparent;color:var(--text-dim);font-size:.74rem;font-weight:600;line-height:1;cursor:pointer;padding:2px 4px;transition:color .15s;outline:none} .cmty-chat-color-btn:hover{color:#3dffa0} .cmty-chat-color-ico{font-size:.95rem;line-height:1} .cmty-chat-color-panel{position:absolute;bottom:28px;right:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px;background:var(--bg);border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.45);z-index:6} .cmty-chat-color-panel[hidden]{display:none} .cmty-chat-swatch{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;transition:transform .12s} .cmty-chat-swatch:hover{transform:scale(1.15)} .cmty-chat-swatch.active{border-color:var(--text);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--text)} [data-theme="light"] .cmty-chat-bubble{background:#f0f2f7} [data-theme="light"] .cmty-chat-input{background:#fff} [data-theme="light"] .cmty-chat-older{background:rgba(0,0,0,.04)} @media (max-width:640px){ .cmty-chat{height:min(72vh,600px);border-radius:10px} .cmty-wrap-wide .cmty-chat{height:calc(100dvh - 170px);min-height:360px} .cmty-chat-row{max-width:90%} .cmty-chat-send{padding:0 14px} } /* ───────── KvK Calendar (kvk-calendar.js) ───────── */ .kvc-panel { padding: 18px 20px 28px; } .kvc-header { margin-bottom: 14px; } .kvc-sub { color: var(--text-dim); font-size: .9rem; margin: 2px 0 8px; } .kvc-season-name { display: inline-block; font-weight: 600; font-size: 1rem; color: var(--gold); background: linear-gradient(135deg, rgba(240,180,41,.12), rgba(240,180,41,.04)); border: 1px solid var(--border-gold); padding: 6px 14px; border-radius: 999px; letter-spacing: .2px; } .kvc-loading { text-align: center; padding: 60px 20px; color: var(--text-dim); font-size: .95rem; } .kvc-toolbar { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; padding: 14px 16px; background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 10px; } .kvc-tb-group { display: flex; flex-direction: column; gap: 6px; } .kvc-tb-right { margin-left: auto; } .kvc-tb-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .8px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; } .kvc-anchor-hint { cursor: help; color: var(--gold); font-size: .85rem; } .kvc-tb-anchor { flex: 1 1 320px; min-width: 240px; } .kvc-anchor-row { display: flex; gap: 8px; align-items: center; } /* Split picker: a custom DD/MM/YYYY date button (browser-locale-independent) + a native for direct hh:mm AM/PM editing. The date button overlays a hidden native whose showPicker() is called on click. */ .kvc-picker-wrap { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; } .kvc-date-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; height: 38px; font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; min-width: 130px; transition: border-color .15s, box-shadow .15s, background .15s; } .kvc-date-btn:hover { background: var(--bg3); } .kvc-date-btn:focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(240,180,41,.18); } .kvc-picker-ico { font-size: 1.05rem; opacity: .85; } .kvc-picker-text { flex: 1; text-align: left; letter-spacing: .2px; } /* Visually hide the native but keep it positioned inside the wrapper so showPicker() / focus is still legal. */ .kvc-picker-native { position: absolute; inset: 0; opacity: 0; pointer-events: none; width: 100%; height: 100%; border: none; padding: 0; margin: 0; } /* Time field: native — we let the browser format the value (AM/PM on en-US, 24h on most others) since users naturally read their own locale's time format. */ .kvc-time-wrap { display: inline-flex; align-items: center; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 0 8px; height: 38px; transition: border-color .15s, box-shadow .15s; } .kvc-time-wrap:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(240,180,41,.18); } .kvc-time-input { background: transparent; color: var(--text); border: none; outline: none; padding: 0 4px; height: 100%; font: inherit; font-variant-numeric: tabular-nums; width: auto; min-width: 0; } .kvc-time-input::-webkit-calendar-picker-indicator { filter: invert(.85); opacity: .55; cursor: pointer; } [data-theme="light"] .kvc-time-input::-webkit-calendar-picker-indicator { filter: none; opacity: .65; } .kvc-now-btn, .kvc-share-btn { white-space: nowrap; height: 38px; padding: 0 14px; display: inline-flex; align-items: center; } .kvc-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: #1a1305; padding: 10px 22px; border-radius: 999px; font-weight: 600; font-size: .9rem; box-shadow: 0 8px 24px rgba(0,0,0,.4); z-index: 10001; animation: kvcToastIn .25s ease-out, kvcToastOut .25s ease-in 1.75s forwards; } @keyframes kvcToastIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } } @keyframes kvcToastOut { to { opacity: 0; transform: translate(-50%, 10px); } } .kvc-select, .kvc-input { background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; font-size: .9rem; font-family: inherit; height: 38px; min-width: 150px; transition: border-color .15s, box-shadow .15s; } .kvc-input { flex: 1; } .kvc-select:focus, .kvc-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(240,180,41,.18); } .kvc-anchor-info { margin: 6px 0 14px; } .kvc-anchor-pill { display: inline-block; background: linear-gradient(135deg, rgba(255,77,109,.12), rgba(255,77,109,.04)); border: 1px solid rgba(255,77,109,.4); border-radius: 10px; padding: 8px 14px; font-size: .88rem; color: var(--text); } .kvc-anchor-pill b { color: #ff7e96; font-weight: 600; } .kvc-anchor-tz { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 8px; font-size: .72rem; font-weight: 600; letter-spacing: .3px; background: rgba(255,77,109,.18); border: 1px solid rgba(255,77,109,.4); color: #ffb0c1; vertical-align: middle; } /* Today summary — quick-glance card above the grid so the user doesn't have to scroll-find today's row. Chips share .kvc-ev so they inherit filter-hide and click-to-modal behavior automatically. */ .kvc-today-summary { background: linear-gradient(135deg, rgba(240,180,41,.10), rgba(240,180,41,.02)); border: 1px solid var(--border-gold); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; } .kvc-today-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; } .kvc-today-title { font-size: .9rem; color: var(--text); } .kvc-today-title b { color: var(--gold); font-weight: 700; } .kvc-today-count { background: rgba(0,0,0,.25); border: 1px solid var(--border); padding: 2px 10px; border-radius: 999px; font-size: .76rem; color: var(--text-dim); font-variant-numeric: tabular-nums; margin-left: auto; } .kvc-today-chips { display: flex; flex-wrap: wrap; gap: 6px; } .kvc-today-ev { /* Inherit .kvc-ev base; override sizing to be a bit more readable when standalone (not constrained by a calendar cell). */ padding: 4px 10px; font-size: .82rem; border-radius: 8px; border-left-width: 3px; } .kvc-today-ev .kvc-ev-n { white-space: normal; /* allow wrap in the summary, unlike grid cells */ overflow: visible; text-overflow: clip; } .kvc-today-empty { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .kvc-today-empty-msg { color: var(--text-dim); font-style: italic; font-size: .85rem; margin-left: auto; } .kvc-filters { margin-bottom: 14px; } .kvc-filters-bar { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .kvc-filters-toggle { display: inline-flex; align-items: center; gap: 8px; background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 7px 12px; font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; } .kvc-filters-toggle:hover { background: var(--bg3); } .kvc-filters-bar.open .kvc-filters-toggle, .kvc-filters-toggle:focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(240,180,41,.18); } .kvc-filters-toggle-ico { font-size: 1rem; } .kvc-filters-toggle-label { font-weight: 600; font-size: .88rem; } .kvc-filters-toggle-count { background: var(--gold); color: #1a1305; font-weight: 700; font-size: .72rem; padding: 2px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; } .kvc-filters-caret { color: var(--text-dim); font-size: .75rem; transition: transform .15s; } .kvc-filters-bar.open .kvc-filters-caret { transform: rotate(180deg); } .kvc-filters-count { background: rgba(0,0,0,.25); border: 1px solid var(--border); padding: 2px 10px; border-radius: 999px; font-size: .78rem; color: var(--text-dim); } /* Popup */ .kvc-filters-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 240px; max-width: 340px; max-height: 360px; overflow-y: auto; background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.45); padding: 8px; display: none; } .kvc-filters-bar.open .kvc-filters-pop { display: block; animation: kvcPopIn .12s ease-out; } @keyframes kvcPopIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .kvc-filters-pop-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .kvc-filters-title { font-weight: 600; font-size: .85rem; flex: 1; } .kvc-filters-actions { display: flex; gap: 6px; } .kvc-mini-btn { background: var(--bg3); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 3px 9px; font-size: .74rem; cursor: pointer; transition: background .15s; } .kvc-mini-btn:hover:not(:disabled) { background: var(--bg4); } .kvc-mini-btn:disabled { opacity: .5; cursor: default; } .kvc-filters-pop-list { display: flex; flex-direction: column; } .kvc-filter-opt { --cat: #888; display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: .85rem; transition: background .12s; } .kvc-filter-opt:hover { background: var(--bg3); } .kvc-filter-opt input { accent-color: var(--cat); cursor: pointer; } .kvc-filter-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--cat); box-shadow: 0 0 0 1px rgba(0,0,0,.3); } .kvc-filter-opt:not(.on) .kvc-filter-dot { opacity: .4; } .kvc-filter-opt:not(.on) .kvc-filter-label { color: var(--text-dim); } .kvc-filter-label { flex: 1; } /* Scroll wrapper keeps the grid horizontally scrollable when the viewport is narrower than the grid's natural width. The grid itself stays at its own intrinsic min-width so the 7 day-columns never collapse unequal. */ .kvc-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 14px; background: var(--bg2); scrollbar-color: var(--gold) var(--bg3); } .kvc-grid-wrap::-webkit-scrollbar { height: 10px; } .kvc-grid-wrap::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; } .kvc-grid-wrap::-webkit-scrollbar-track { background: var(--bg3); } .kvc-grid { display: grid; gap: 0; min-width: 820px; /* 50 + 7*110 = 820 keeps cells visibly readable */ background: var(--bg2); } .kvc-grid-head { display: grid; grid-template-columns: 50px repeat(7, minmax(110px, 1fr)); background: linear-gradient(180deg, var(--bg3), var(--bg2)); border-bottom: 1px solid var(--border); } .kvc-grid-day-head { padding: 10px 8px; text-align: center; font-size: .78rem; font-weight: 600; color: var(--text-dim); letter-spacing: .8px; text-transform: uppercase; } .kvc-grid-day-head:nth-child(7), .kvc-grid-day-head:nth-child(8) { color: #ff7e96; } .kvc-grid-row { display: grid; grid-template-columns: 50px repeat(7, minmax(110px, 1fr)); border-top: 1px solid var(--border); } .kvc-grid-row:first-child { border-top: none; } .kvc-grid-wlabel { background: var(--bg3); color: var(--text-dim); font-size: .72rem; font-weight: 600; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--border); writing-mode: vertical-rl; transform: rotate(180deg); padding: 6px 0; letter-spacing: 1px; } .kvc-cell { border-right: 1px solid var(--border); background: var(--bg2); min-height: 92px; padding: 6px; display: flex; flex-direction: column; gap: 4px; transition: background .15s; position: relative; min-width: 0; /* allow inner content (long event names) to be clipped */ overflow: hidden; } .kvc-cell:last-child { border-right: none; } .kvc-cell:hover { background: var(--bg3); } .kvc-cell.today { background: linear-gradient(180deg, rgba(240,180,41,.07), transparent 60%); box-shadow: inset 0 0 0 2px var(--gold); } .kvc-cell.kvc-flash { animation: kvcFlash 1.4s ease-out; } @keyframes kvcFlash { 0% { box-shadow: inset 0 0 0 3px var(--gold), 0 0 20px 4px rgba(240,180,41,.6); } 50% { box-shadow: inset 0 0 0 3px var(--gold), 0 0 12px 2px rgba(240,180,41,.3); } 100% { box-shadow: inset 0 0 0 2px var(--gold); } } .kvc-cell-head { display: flex; align-items: center; gap: 4px; font-size: .72rem; color: var(--text-dim); margin-bottom: 2px; } .kvc-cell-dnum { font-weight: 700; font-size: .88rem; color: var(--text); } .kvc-cell-dmon { opacity: .65; } .kvc-cell-today { margin-left: auto; background: var(--gold); color: #1a1305; font-weight: 700; font-size: .65rem; padding: 1px 6px; border-radius: 6px; text-transform: uppercase; } .kvc-cell-body { display: flex; flex-direction: column; gap: 3px; flex: 1; } .kvc-cell-empty { min-height: 6px; } .kvc-ev { display: flex; align-items: center; gap: 5px; background: linear-gradient(90deg, color-mix(in srgb, var(--ev) 85%, transparent), color-mix(in srgb, var(--ev) 55%, transparent)); color: #fff; border: 1px solid color-mix(in srgb, var(--ev) 100%, transparent); border-left: 3px solid var(--ev); border-radius: 6px; padding: 3px 7px; font-size: .74rem; line-height: 1.25; text-align: left; cursor: pointer; font-family: inherit; transition: transform .12s, filter .12s; --ev: #888; text-shadow: 0 1px 2px rgba(0,0,0,.4); } .kvc-ev:hover { transform: translateX(2px); filter: brightness(1.18); } .kvc-ev-hidden { display: none !important; } .kvc-ev-t { font-weight: 700; opacity: .92; font-variant-numeric: tabular-nums; } .kvc-ev-n { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kvc-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 14px; padding: 10px 14px; background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; font-size: .8rem; color: var(--text-dim); } .kvc-legend-title { font-weight: 600; color: var(--text); } .kvc-legend-item { display: inline-flex; align-items: center; gap: 6px; } .kvc-legend-sw { width: 12px; height: 12px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.3); } .kvc-modal-back { position: fixed; inset: 0; background: rgba(5,8,15,.7); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 16px; animation: kvcFadeIn .15s ease-out; } @keyframes kvcFadeIn { from { opacity: 0; } to { opacity: 1; } } .kvc-modal { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; max-width: 460px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.6); overflow: hidden; animation: kvcSlide .2s ease-out; } @keyframes kvcSlide { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } } .kvc-modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--ev) 35%, var(--bg3)), var(--bg3)); border-bottom: 1px solid var(--border); --ev: #888; } .kvc-modal-title { display: flex; align-items: center; gap: 10px; flex: 1; } .kvc-modal-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ev); box-shadow: 0 0 0 3px rgba(255,255,255,.15); } .kvc-modal-name { font-weight: 700; font-size: 1.05rem; color: #fff; } .kvc-modal-alt { font-size: .82rem; color: var(--text-dim); margin-top: 2px; } .kvc-modal-x { background: rgba(0,0,0,.3); color: #fff; border: none; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: .9rem; } .kvc-modal-x:hover { background: rgba(0,0,0,.55); } .kvc-modal-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; } .kvc-modal-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: .9rem; } .kvc-modal-row:last-child { border-bottom: none; } .kvc-modal-k { color: var(--text-dim); font-weight: 600; } .kvc-modal-v { color: var(--text); text-align: right; } .kvc-modal-foot { padding: 10px 16px 14px; display: flex; justify-content: flex-end; border-top: 1px solid var(--border); } @media (max-width: 760px) { .kvc-panel { padding: 14px 12px 22px; } .kvc-toolbar { gap: 10px; padding: 10px; } .kvc-tb-group { width: 100%; } .kvc-tb-right { margin-left: 0; } /* Keep cells equal-width and readable on mobile — let the container scroll horizontally rather than shrinking columns unevenly. */ .kvc-grid { min-width: 700px; } .kvc-grid-head, .kvc-grid-row { grid-template-columns: 36px repeat(7, minmax(94px, 1fr)); } .kvc-grid-day-head { padding: 7px 4px; font-size: .68rem; letter-spacing: .3px; } .kvc-grid-wlabel { font-size: .62rem; } .kvc-cell { min-height: 76px; padding: 4px; gap: 3px; } .kvc-cell-head { font-size: .66rem; } .kvc-cell-dnum { font-size: .8rem; } .kvc-cell-dmon { font-size: .58rem; } .kvc-cell-today { font-size: .55rem; padding: 0 4px; } .kvc-ev { padding: 2px 5px; font-size: .66rem; border-radius: 5px; border-left-width: 2px; } .kvc-ev-t { font-size: .6rem; } .kvc-anchor-row { flex-wrap: wrap; gap: 6px; } .kvc-picker-wrap { flex: 1 1 60%; } .kvc-date-btn { width: 100%; min-width: 0; } .kvc-time-wrap { flex: 1 1 35%; } .kvc-time-input { width: 100%; flex: 1; } } @media (max-width: 420px) { .kvc-grid { min-width: 620px; } .kvc-grid-head, .kvc-grid-row { grid-template-columns: 30px repeat(7, minmax(82px, 1fr)); } .kvc-ev { font-size: .6rem; padding: 2px 4px; } .kvc-ev-t { font-size: .56rem; } } [data-theme="light"] .kvc-ev { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); } [data-theme="light"] .kvc-anchor-pill { background: linear-gradient(135deg, rgba(255,77,109,.08), rgba(255,77,109,.02)); } [data-theme="light"] .kvc-cell.today { background: linear-gradient(180deg, rgba(160,112,0,.12), transparent 60%); } /* iOS focus-zoom is prevented by viewport meta `maximum-scale=1.0` in index.html, so inputs can keep their original font-size on mobile without auto-zoom. */ [data-theme="light"] .cmty-search-input:focus,[data-theme="light"] .cmty-select:focus{background:#fff}