/* ═══════════════════════════════════════════════════════════════════ STATS SCREEN — TC-DNA (03.07 redesign) Public game stats: Cards (list/tier) · Heroes · AI Styles + synergy modal. stats.js was previously 100% inline-styled; ported to these classes. In-screen chrome scoped under .stats-screen; the synergy modal is appended to , so it is scoped under .stats-synergy. ═══════════════════════════════════════════════════════════════════ */ .stats-screen, .stats-synergy { --gold: #FFC95C; --gold2: #FFE6A6; --cyan: #9CEBFF; --cyan2: #46E0FF; --line: rgba(120,160,210,.14); --txt: #e8eefb; --mut: #8595b0; } .stats-screen { max-width: 100% !important; /* override .screen 390px cap; tc-page caps content */ padding: 0 !important; } /* ── top note in crumbs ── */ .stats-screen .stats-note-top { font-family: 'JetBrains Mono', monospace; color: var(--mut); font-size: 12px; white-space: nowrap; } /* ── filter bar (tabs / range / elo) ── */ .stats-screen .fbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 16px; } .stats-screen .seg { display: flex; align-items: center; gap: 7px; white-space: nowrap; font-weight: 600; font-size: 13.5px; color: var(--txt); padding: 9px 15px; border-radius: 11px; background: rgba(13,19,32,.6); border: 1px solid var(--line); cursor: pointer; } .stats-screen .seg.on { border-color: rgba(255,201,92,.6); background: linear-gradient(180deg, rgba(255,201,92,.14), rgba(255,201,92,.03)); color: var(--gold2); box-shadow: 0 0 16px rgba(255,201,92,.12); } .stats-screen .fdiv { width: 1px; height: 22px; background: var(--line); margin: 0 3px; } .stats-screen .flbl { color: var(--mut); font-size: 12px; letter-spacing: .5px; } .stats-screen .spill { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12.5px; color: var(--txt); padding: 7px 12px; border-radius: 9px; background: rgba(13,19,32,.6); border: 1px solid var(--line); cursor: pointer; } .stats-screen .spill.on { border-color: rgba(70,224,255,.5); background: rgba(70,224,255,.1); color: var(--cyan2); } /* ── content panel (one per tab) ── */ .stats-screen .stats-panel { position: relative; border-radius: 16px; padding: 18px; background: linear-gradient(180deg, rgba(20,28,46,.85), rgba(10,14,24,.92)); border: 1px solid var(--line); overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.4); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); } .stats-screen .stats-panel::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(96deg, var(--gold), var(--cyan2)); opacity: .9; } .stats-screen .stats-msg { color: var(--mut); text-align: center; padding: 40px 0; } .stats-screen .stats-msg.err { color: #ff7a7a; } /* ── card controls ── */ .stats-screen .ctrls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .stats-screen .cpill { font-weight: 600; font-size: 12.5px; color: var(--txt); padding: 7px 12px; border-radius: 9px; background: rgba(13,19,32,.6); border: 1px solid var(--line); cursor: pointer; display: flex; align-items: center; gap: 6px; } .stats-screen .cpill.on { border-color: rgba(255,201,92,.55); background: linear-gradient(180deg, rgba(255,201,92,.13), rgba(255,201,92,.02)); color: var(--gold2); } .stats-screen .info { color: var(--mut); font-size: 12.5px; margin-bottom: 12px; } /* ── card table ── */ .stats-screen .ctable { display: grid; grid-template-columns: 1fr 70px 70px 64px 84px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .stats-screen .ctable .h { padding: 10px 13px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--mut); font-weight: 700; background: rgba(8,12,22,.6); } .stats-screen .ctable .h.r, .stats-screen .ctable .c.r { text-align: right; justify-content: flex-end; } .stats-screen .ctable .c { padding: 10px 13px; display: flex; align-items: center; gap: 8px; font-size: 13.5px; border-top: 1px solid rgba(120,160,210,.07); cursor: pointer; } .stats-screen .ctable .c.num { font-family: 'JetBrains Mono', monospace; font-weight: 700; } .stats-screen .rdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; } .stats-screen .cid { color: var(--mut); font-size: 11px; font-family: 'JetBrains Mono', monospace; } .stats-screen .lowtag { font-size: 9.5px; letter-spacing: .5px; color: #ffc850; background: rgba(255,200,80,.16); border: 1px solid rgba(255,200,80,.3); padding: 1px 6px; border-radius: 5px; } /* ── tier list ── */ .stats-screen .tnote { font-size: 11.5px; color: var(--mut); margin-bottom: 10px; } .stats-screen .tier { display: grid; grid-template-columns: 62px 1fr; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 10px; } .stats-screen .tletter { color: #0a0a12; font-weight: 800; font-size: 28px; display: flex; align-items: center; justify-content: center; } .stats-screen .tcards { padding: 11px; display: flex; flex-wrap: wrap; gap: 7px; background: rgba(8,12,22,.45); } .stats-screen .chip { display: flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 5px 10px; border-radius: 8px; background: rgba(13,19,32,.7); border: 1px solid var(--line); cursor: pointer; } .stats-screen .chip .wr { font-family: 'JetBrains Mono', monospace; font-weight: 700; } .stats-screen .tier-empty { opacity: .4; padding: 6px 0; } /* ── hero + ai grids ── */ .stats-screen .hgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; } .stats-screen .hcard { background: rgba(8,12,22,.5); border: 1px solid var(--line); border-radius: 13px; padding: 14px; } .stats-screen .hhead { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; } .stats-screen .htile { width: 46px; height: 46px; flex-shrink: 0; font-size: 24px; display: flex; align-items: center; justify-content: center; background: rgba(8,12,22,.6); border: 1px solid var(--line); border-radius: 10px; } .stats-screen .hname { font-weight: 700; font-size: 15px; } .stats-screen .hmeta { color: var(--mut); font-size: 11.5px; margin-top: 2px; } .stats-screen .hstats { display: flex; gap: 16px; font-size: 13px; align-items: baseline; } .stats-screen .hstats .k { color: var(--mut); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; } .stats-screen .hstats .v { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 15px; } .stats-screen .aigrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; } .stats-screen .aicard { background: rgba(8,12,22,.5); border: 1px solid var(--line); border-radius: 13px; padding: 16px; } .stats-screen .aihead { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .stats-screen .aihead .t { font-weight: 700; font-size: 16px; } .stats-screen .aidesc { color: var(--mut); font-size: 12.5px; margin-bottom: 12px; } .stats-screen .foot { text-align: center; color: rgba(133,149,176,.6); font-size: 12px; margin-top: 26px; } /* ═══ SYNERGY MODAL (appended to ) ═══ */ .stats-synergy { position: fixed; inset: 0; z-index: 9000; background: rgba(6,8,15,.72); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; } .stats-synergy .syn-box { position: relative; background: linear-gradient(180deg, rgba(20,28,46,.96), rgba(10,14,24,.98)); border: 1px solid rgba(120,160,210,.22); border-radius: 16px; padding: 20px 22px; min-width: 320px; max-width: 680px; width: calc(100% - 32px); max-height: 90vh; overflow-y: auto; color: var(--txt); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); } .stats-synergy .syn-close { position: absolute; top: 14px; right: 14px; background: rgba(255,80,80,.12); border: 1px solid rgba(255,80,80,.3); color: #ff8080; padding: 6px 12px; border-radius: 9px; cursor: pointer; font-weight: 700; } .stats-synergy .stats-msg { color: var(--mut); text-align: center; padding: 24px; } .stats-synergy .stats-msg.err { color: #ff7a7a; } .stats-synergy .syn { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; } .stats-synergy .cardart { width: 160px; flex-shrink: 0; position: relative; } .stats-synergy .cardart img { width: 160px; height: auto; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.4); display: block; } .stats-synergy .rbadge { position: absolute; top: 8px; right: 8px; color: #0a0a12; padding: 3px 9px; border-radius: 5px; font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; } .stats-synergy .meta { flex: 1; min-width: 240px; } .stats-synergy .meta h2 { font-size: 21px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin: 0 0 3px; } .stats-synergy .cid { color: var(--mut); font-size: 13px; font-family: 'JetBrains Mono', monospace; font-weight: 400; } .stats-synergy .asset { color: var(--mut); font-size: 13px; margin-bottom: 12px; font-family: 'JetBrains Mono', monospace; } .stats-synergy .statgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 12px; } .stats-synergy .sbox { background: rgba(13,19,32,.7); border: 1px solid var(--line); border-radius: 9px; padding: 9px; text-align: center; } .stats-synergy .sbox .k { color: var(--mut); font-size: 10px; letter-spacing: .5px; text-transform: uppercase; } .stats-synergy .sbox .v { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 18px; margin-top: 3px; } .stats-synergy .tagrow { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .stats-synergy .etag { font-size: 11.5px; padding: 3px 9px; border-radius: 7px; background: rgba(13,19,32,.7); border: 1px solid var(--line); color: #cfe0f5; } .stats-synergy .etag.trig { color: var(--cyan2); border-color: rgba(70,224,255,.35); background: rgba(70,224,255,.08); } .stats-synergy .ability { background: rgba(8,12,22,.6); border-radius: 6px; padding: 10px 12px; font-size: 13px; line-height: 1.5; } .stats-synergy .partners { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 14px; } .stats-synergy .partners h3 { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gold2); margin: 0 0 4px; } .stats-synergy .partners .sub { color: var(--mut); font-size: 12px; margin-bottom: 10px; } .stats-synergy .prow { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 9px; background: rgba(8,12,22,.5); border: 1px solid var(--line); margin-bottom: 5px; } .stats-synergy .prow .rdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; } .stats-synergy .prow .nm { flex: 1; font-weight: 600; font-size: 13.5px; } .stats-synergy .prow .co { color: var(--mut); font-size: 11.5px; font-family: 'JetBrains Mono', monospace; } .stats-synergy .prow .wr { font-family: 'JetBrains Mono', monospace; font-weight: 800; width: 50px; text-align: right; }