/* ════════════════════════════════════════════════════════════════════════════ bracket.css — لوحة البطولة (خلية الحروف) · حروف ──────────────────────────────────────────────────────────────────────────── 1. رموز الألوان الأساسيّة (قيم التصميم) 2. رموز اللوحة --tb-* 3. أساسات 4. الرأس 5. ترويسة البطولة 6. المسرح والخلفيّة 7. الشجرة: الأعمدة والخلايا والوصلات 8. بطاقة المباراة وصفوف الفرق 9. النهائي والتاج والبطل 10. الجوّال 11. النوافذ والتوستات 12. الحالات 14. الانكشاف 15. الاستجابة 16. صفحة الإنشاء وإضافات الربط ════════════════════════════════════════════════════════════════════════════ */ /* ═══ 1. رموز الألوان الأساسيّة ═══ قيم التصميم المعتمَدة كما سُلِّمت (تختلف درجاتها قليلاً عن style.css، والصفحة مستقلّة لا تحمّله) — تبقى هنا كي تطابق اللوحة التصميم بالضبط. */ :root{ --bg0:#f7f3ea; --bg1:#ebe1cb; --bg-glow1:#fffdf585; --bg-glow2:#e9ddc270; --on-bg:#2a2720; --on-bg-dim:#6b6350; --panel:#fffdf8; --panel-line:#e4d9c0; --card:#fffdf8; --card2:#fbf6ec; --card-line:#e4d9c0; --surf:#f3ecdd; --surf-line:#e6dbc2; --surf-hover:#eae0cc; --field:#fffef9; --field-line:#e6dbc2; --ink:#2a2720; --dim:#6b6350; --gold:#a8842c; --gold-soft:#c9ab63; --gold-text:#75570f; --danger:#c0392b; --shadow-card:0 12px 30px #5b4a1f14; --shadow-soft:0 8px 22px #5b4a1f0f; --scrim:#2b261cd9; --font-display:'Alexandria','Cairo',sans-serif; --font-body:'Cairo',system-ui,sans-serif; --radius:16px; } html.dark{ --bg0:#100d09; --bg1:#1d1811; --bg-glow1:#4a3c23a8; --bg-glow2:#2a241890; --on-bg:#f4ecda; --on-bg-dim:#c2b599; --panel:#241f17; --panel-line:#463e2d; --card:#241f17; --card2:#1c1811; --card-line:#463e2d; --surf:#302a20; --surf-line:#484030; --surf-hover:#3b3327; --field:#302a20; --field-line:#484030; --ink:#f4ecda; --dim:#b5aa93; --gold-soft:#d6b869; --gold-text:#dfba62; } /* ═══ 2. رموز اللوحة ═══ */ :root{ --tb-ease:cubic-bezier(.2,.8,.2,1); --tb-head-bg:#f7f3eadb; /* النهاريّ: ورق فاخر وماء ذهب — أسطح ناصعة وظلّ قريب مشدود */ --tb-card-bg:linear-gradient(180deg,#ffffff 0%,#fdfaf3 100%); --tb-card-bg-hover:linear-gradient(180deg,#ffffff 0%,#fffdf8 100%); --tb-card-edge:inset 0 1px 0 #ffffff; --tb-elev:var(--tb-card-edge), 0 1px 1px #6b57281a, 0 4px 8px -4px #6b572821, 0 14px 24px -14px #6b57282e; --tb-elev-hi:var(--tb-card-edge), 0 1px 2px #6b572821, 0 8px 16px -6px #6b57282b, 0 24px 38px -18px #6b572838; --tb-inset:#2a272008; --tb-row-fade:#fffefbf2; --tb-card-done:#faf6edcc; --tb-elev-lo:0 1px 1px #6b572814, 0 3px 8px -4px #6b57281c; --tb-wash:#a8842c12; --tb-wash-2:#a8842c0a; --tb-champ-hi:#8f6b14; --tb-ht-o1:.26; --tb-ht-o2:.15; --tb-ht-w:min(1180px,128vw); --tb-em-op:.055; --tb-em-w:min(1000px,112vw); --tb-di-hi:#dceffb; --tb-di-1:#6ba8d0; --tb-di-2:#3d729c; --tb-di-glow:#5a97c247; --tb-done-veil:#1b170f0f; --tb-text-sh:none; --tb-loser-ink:#6b6350; --tb-live-bg:#1d7a4d12; --tb-live-line:#1d7a4d45; --tb-live-ink:#15663f; --tb-live-dot:#1f8a56; --tb-live-halo:#1f8a5626; --tb-vs-plate-bg:#fffdf8; --tb-vs-sh:0 1px 0 #ffffff, 0 0 10px #a8842c47; --tb-grain:.022; --tb-gold-line:#a8842c4d; --tb-gold-bg:#a8842c12; --tb-gold-wash:linear-gradient(to left,#a8842c14 0%,#a8842c00 58%); --tb-wire:#dccfb0; --tb-wire-gold:#a8842c; --tb-glow:#c9ab6333; --tb-r-sm:12px; --tb-shadow-final:var(--tb-card-edge), 0 2px 4px #6b57281f, 0 12px 24px -10px #6b57282b, 0 32px 52px -26px #6b57283d; } html.dark{ --tb-head-bg:#100d09e0; /* الليليّ: بنّ محروق وذهب — أسطح ترتفع بضوء حافّة علويّ */ --tb-card-bg:linear-gradient(180deg,#332b20 0%,#251f17 100%); --tb-card-bg-hover:linear-gradient(180deg,#3b3227 0%,#2b241a 100%); --tb-card-edge:inset 0 1px 0 #ffffff14; --tb-elev:var(--tb-card-edge), 0 1px 2px #00000080, 0 10px 20px -10px #000000ad, 0 34px 54px -30px #000000d4; --tb-elev-hi:var(--tb-card-edge), 0 2px 4px #0000008f, 0 16px 28px -12px #000000bd, 0 44px 68px -32px #000000e0; --tb-inset:#f4ecda0a; --tb-row-fade:#2e2719f2; --tb-card-done:#221d15c4; --tb-elev-lo:0 1px 2px #00000070, 0 6px 14px -8px #00000094; --tb-wash:#dfba6217; --tb-wash-2:#dfba620f; --tb-champ-hi:#f7e2a4; --tb-ht-o1:.4; --tb-ht-o2:.22; --tb-em-op:.09; --tb-di-hi:#f5fcff; --tb-di-1:#aadcf7; --tb-di-2:#5aa3d6; --tb-di-glow:#8fd4ff8f; --tb-done-veil:#00000052; --tb-text-sh:0 1px 3px #000000a8; --tb-loser-ink:#cfc4ab; --tb-live-bg:#3ddc8414; --tb-live-line:#3ddc8440; --tb-live-ink:#6fe3a4; --tb-live-dot:#4ee08e; --tb-live-halo:#4ee08e29; --tb-vs-plate-bg:#221d15; --tb-vs-sh:0 1px 0 #00000080, 0 0 12px #dfba6266; --tb-grain:.045; --tb-gold-line:#dfba6247; --tb-gold-bg:#dfba6212; --tb-gold-wash:linear-gradient(to left,#dfba621c 0%,#dfba6200 58%); --tb-wire:#4a4232; --tb-wire-gold:#c9a44c; --tb-glow:#d6b86933; --tb-shadow-final:var(--tb-card-edge), 0 2px 6px #00000094, 0 22px 40px -16px #000000c4, 0 54px 82px -38px #000000eb; } /* ═══ 3. أساسات ═══ */ *{box-sizing:border-box;} [hidden]{display:none!important;} html,body{margin:0;padding:0;} html{overflow-x:hidden;} body{ position:relative; min-height:100vh; overflow-x:hidden; background: radial-gradient(120% 62% at 50% 0%, var(--bg-glow1) 0%, transparent 62%), linear-gradient(176deg, var(--bg0) 0%, var(--bg1) 54%, var(--bg0) 100%); color:var(--ink); font-family:var(--font-body); font-size:15px; line-height:1.7; font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; transition:background-color .3s ease, color .3s ease; } h1,h2,h3,h4,p{margin:0;} a{color:var(--gold-text); text-decoration:none;} a:hover{color:var(--gold);} button{font:inherit; color:inherit;} :focus-visible{outline:2px solid var(--gold-text); outline-offset:2px; border-radius:6px;} .tb-vh{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .tb-ic{width:20px;height:20px;flex:none;} .tb-main{max-width:1600px; margin:0 auto; padding:0 24px 8px; position:relative; z-index:1;} .tb-btn{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border-radius:12px; border:1px solid var(--surf-line); background:var(--surf); color:var(--ink); font-size:14px; font-weight:600; white-space:nowrap; cursor:pointer; transition:background-color .16s var(--tb-ease), border-color .16s var(--tb-ease), color .16s var(--tb-ease); } .tb-btn:hover{background:var(--surf-hover); border-color:var(--tb-gold-line);} .tb-btn--ghost{background:transparent;} .tb-btn--ghost:hover{background:var(--surf);} .tb-btn--gold{background:var(--tb-gold-bg); border-color:var(--tb-gold-line); color:var(--gold-text); font-weight:700;} .tb-btn--gold:hover{background:#a8842c24; border-color:var(--gold-soft);} .tb-btn--sm{min-height:36px; padding:0 12px; font-size:13px; border-radius:10px;} .tb-icon-btn{ display:inline-grid; place-items:center; width:44px; height:44px; padding:0; border-radius:12px; border:1px solid transparent; background:transparent; color:var(--dim); cursor:pointer; transition:background-color .16s var(--tb-ease), color .16s var(--tb-ease), border-color .16s var(--tb-ease); } .tb-icon-btn:hover{background:var(--surf); color:var(--ink); border-color:var(--surf-line);} /* ═══ 4. الرأس ═══ */ .tb-head{ position:sticky; top:0; z-index:40; background:var(--tb-head-bg); -webkit-backdrop-filter:blur(12px) saturate(140%); backdrop-filter:blur(12px) saturate(140%); border-bottom:1px solid var(--panel-line); } .tb-head-in{ max-width:1600px; margin:0 auto; padding:8px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; } .tb-brand{ font-family:var(--font-display); font-weight:900; font-size:26px; letter-spacing:-.01em; color:var(--ink); line-height:1.2; } .tb-brand:hover{color:var(--ink);} .tb-brand-last{color:var(--gold);} html.dark .tb-brand-last{color:var(--gold-soft);} .tb-head-acts{display:flex; align-items:center; gap:8px;} .tb-ic--moon{display:none;} html.dark .tb-ic--sun{display:none;} html.dark .tb-ic--moon{display:block;} /* ═══ 5. ترويسة البطولة ═══ */ .tb-intro{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px 24px; padding:26px 0 20px; } .tb-title{ font-family:var(--font-display); font-weight:800; font-size:clamp(26px,3.4vw,44px); line-height:1.2; letter-spacing:-.025em; margin-bottom:12px; text-wrap:balance; } .tb-meta{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;} .tb-server{display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:var(--dim);} .tb-avatar{ display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--tb-gold-bg); box-shadow:inset 0 0 0 1px var(--tb-gold-line); color:var(--gold-text); font-family:var(--font-display); font-weight:700; font-size:14px; } .tb-count{font-size:14px; font-weight:600; color:var(--dim);} .tb-count b{font-family:var(--font-display); font-weight:700; color:var(--ink);} .tb-intro-acts{display:flex; align-items:center; gap:8px;} .tb-chip{ display:inline-flex; align-items:center; gap:6px; height:25px; padding:0 10px; border-radius:999px; background:var(--surf); box-shadow:inset 0 0 0 1px var(--surf-line); font-size:11.5px; font-weight:600; color:var(--dim); white-space:nowrap; letter-spacing:.01em; transition:background-color .2s var(--tb-ease), color .2s var(--tb-ease); } /* مباشر الآن: أخضر حيّ يدلّ على مباراة قائمة */ .tb-chip--live{ background:var(--tb-live-bg); box-shadow:inset 0 0 0 1px var(--tb-live-line); color:var(--tb-live-ink); font-weight:700; } .tb-chip--live .tb-dot{ background:var(--tb-live-dot); box-shadow:0 0 0 3px var(--tb-live-halo); animation:tb-pulse 1.9s var(--tb-ease) infinite; } @keyframes tb-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.68)}} .tb-chip--org{background:var(--tb-gold-bg); box-shadow:inset 0 0 0 1px var(--tb-gold-line); color:var(--gold-text);} .tb-chip--gold{background:var(--tb-gold-bg); box-shadow:inset 0 0 0 1px var(--gold-soft); color:var(--gold-text); font-weight:700;} .tb-dot{width:6px; height:6px; border-radius:50%; background:var(--gold); flex:none;} .tb-chip--live .tb-dot{animation:tb-pulse 1.9s var(--tb-ease) infinite;} @keyframes tb-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}} /* ═══ 6. المسرح والخلفيّة: طبقة واحدة تغطّي الصفحة كلّها ═══ */ .tb-stage{position:relative; min-height:440px; padding:6px 0 30px;} .tb-decor{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;} .tb-decor-ambient{ position:absolute; inset-inline:0; top:0; height:min(760px,78%); background:radial-gradient(84% 100% at 50% 0%, var(--bg-glow1) 0%, transparent 74%); } .tb-decor-grain{ position:absolute; inset:0; opacity:var(--tb-grain); mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E"); } html.dark .tb-decor-grain{mix-blend-mode:overlay;} /* هالة الهالفتون: نموذج واحد مرسوم مسبقاً (نقاط تكبر وتتكثّف نحو مركز النهائي وتتبدّد نحو الحواف). صورة واحدة بلا تكرار ولا قناع، والحركة opacity فقط. */ .tb-halftone{position:absolute; inset:0; overflow:hidden;} .tb-halftone::before,.tb-halftone::after{ content:''; position:absolute; top:50%; left:50%; width:var(--tb-ht-w); height:var(--tb-ht-w); transform:translate(-50%,-52%); background-image:url("data:image/svg+xml,"); background-size:100% 100%; background-repeat:no-repeat; } .tb-halftone::before{opacity:var(--tb-ht-o1);} .tb-halftone::after{ width:calc(var(--tb-ht-w) * 1.6); height:calc(var(--tb-ht-w) * 1.6); opacity:var(--tb-ht-o2); } /* شظايا ماسيّة زرقاء تطفو ببطء عبر الصفحة */ .tb-shards{position:absolute; inset:0; overflow:hidden;} .tb-shards i{ position:absolute; top:var(--y); left:var(--x); width:var(--sz); height:calc(var(--sz) * 1.5); opacity:0; background:linear-gradient(150deg, var(--tb-di-hi), var(--tb-di-1) 52%, var(--tb-di-2)); clip-path:polygon(50% 0%, 100% 34%, 72% 100%, 28% 100%, 0% 34%); filter:drop-shadow(0 0 5px var(--tb-di-glow)); animation:tb-shard var(--d) linear var(--dl) infinite; will-change:transform, opacity; } @keyframes tb-shard{ 0%{transform:translate3d(0,0,0) rotate(0deg) scale(.7); opacity:0} 12%{opacity:var(--o)} 72%{opacity:calc(var(--o) * .5)} 100%{transform:translate3d(var(--dx),var(--dy),0) rotate(190deg) scale(1.05); opacity:0} } /* شارة الخليّة العملاقة الواحدة خلف النهائي — ساكنة تماماً */ .tb-emblem{ position:absolute; top:50%; left:50%; width:var(--tb-em-w); height:var(--tb-em-w); transform:translate(-50%,-53%); opacity:var(--tb-em-op); background-repeat:no-repeat; background-size:100% 100%; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23a8842c' stroke-width='2.2'%3E%3Cpath d='M200 92l45.8 26.4v52.8L200 197.6l-45.8-26.4v-52.8z'/%3E%3Cpath d='M200 26.4l102.5 59.2v118.3L200 263.1 97.5 203.9V85.6z'/%3E%3Cpath d='M200 -39l159.2 91.9v183.8L200 328.6 40.8 236.7V52.9z' stroke-opacity='.62'/%3E%3C/g%3E%3C/svg%3E"); } html.dark .tb-emblem{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23d6b15a' stroke-width='2.2'%3E%3Cpath d='M200 92l45.8 26.4v52.8L200 197.6l-45.8-26.4v-52.8z'/%3E%3Cpath d='M200 26.4l102.5 59.2v118.3L200 263.1 97.5 203.9V85.6z'/%3E%3Cpath d='M200 -39l159.2 91.9v183.8L200 328.6 40.8 236.7V52.9z' stroke-opacity='.62'/%3E%3C/g%3E%3C/svg%3E"); } @keyframes tb-breathe{0%,100%{transform:scale(1);opacity:.62}50%{transform:scale(1.06);opacity:1}} .tb-scroll{ position:relative; z-index:1; overflow-x:auto; overflow-y:hidden; display:flex; justify-content:flex-start; padding-bottom:10px; scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:var(--surf-line) transparent; } @supports (justify-content:safe center){ .tb-scroll{justify-content:safe center;} /* يتمركز إن اتّسع، ويبدأ من دور الـ 16 إن فاض */ } .tb-scroll::-webkit-scrollbar{height:8px;} .tb-scroll::-webkit-scrollbar-thumb{background:var(--surf-line); border-radius:99px;} .tb-scroll::-webkit-scrollbar-track{background:transparent;} /* دليل التمرير: شريط رقيق فقط (بلا تعمية على النهائي) */ /* ═══ 7. الشجرة ═══ */ .tb-bracket{ --tb-cardw:212px; --tb-gut:30px; --tb-cellh:192px; --tb-finalw:286px; --tb-rows:4; display:flex; justify-content:flex-start; align-items:stretch; flex:0 0 auto; min-width:-webkit-min-content; min-width:min-content; margin:0; padding:14px 2px 6px; } .tb-bracket[data-size="8"]{--tb-cardw:240px; --tb-gut:36px; --tb-cellh:230px; --tb-finalw:314px; --tb-rows:2; padding-top:180px;} @media (max-width:1279px){ .tb-bracket{--tb-cardw:196px; --tb-gut:26px; --tb-cellh:186px; --tb-finalw:262px;} .tb-bracket[data-size="8"]{--tb-cardw:214px; --tb-gut:30px; --tb-cellh:220px; --tb-finalw:284px; padding-top:168px;} } .tb-col{display:flex; flex-direction:column; width:calc(var(--tb-cardw) + var(--tb-gut)); flex:none;} .tb-col--center{width:var(--tb-finalw); position:relative;} .tb-col--center::before{ /* الهالة الوحيدة في الصفحة: خلف النهائي */ content:''; position:absolute; z-index:0; pointer-events:none; left:50%; top:50%; width:620px; height:520px; transform:translate(-50%,-50%); background:radial-gradient(closest-side, var(--tb-glow) 0%, transparent 72%); animation:tb-breathe 8s ease-in-out infinite; } .tb-col-title{display:none;} .tb-col-body{height:calc(var(--tb-cellh) * var(--tb-rows)); display:flex; flex-direction:column; position:relative; z-index:1;} .tb-cell{position:relative; flex:1 1 0; min-height:0; display:flex; align-items:center;} .tb-col--right .tb-cell{padding-left:var(--tb-gut);} .tb-col--left .tb-cell{padding-right:var(--tb-gut);} .tb-cell > .tb-match{width:100%;} .tb-final-stack > .tb-match{width:100%;} /* الوصلات */ .tb-w{position:absolute; background:var(--tb-wire); overflow:hidden; z-index:0;} .tb-w::after{ content:''; position:absolute; inset:0; background:var(--tb-wire-gold); transform:scaleX(0); transition:transform .5s var(--tb-ease); } .tb-w--v::after{transform:scaleY(0);} .tb-w.is-gold::after{transform:none;} .tb-w--h1,.tb-w--h2,.tb-w--straight{height:2px;} .tb-w--h1,.tb-w--straight{top:50%; margin-top:-1px;} .tb-w--h2{bottom:-1px;} .tb-w--v{width:2px;} .tb-w--v.is-down{top:50%; bottom:0;} .tb-w--v.is-up{top:0; bottom:50%;} .tb-col--right .tb-w--h1{left:calc(var(--tb-gut) / 2); width:calc(var(--tb-gut) / 2);} .tb-col--right .tb-w--h2{left:0; width:calc(var(--tb-gut) / 2 + 1px);} .tb-col--right .tb-w--straight{left:0; width:var(--tb-gut);} .tb-col--right .tb-w--v{left:calc(var(--tb-gut) / 2 - 1px);} .tb-col--right .tb-w--h1::after,.tb-col--right .tb-w--h2::after,.tb-col--right .tb-w--straight::after{transform-origin:right center;} .tb-col--left .tb-w--h1{right:calc(var(--tb-gut) / 2); width:calc(var(--tb-gut) / 2);} .tb-col--left .tb-w--h2{right:0; width:calc(var(--tb-gut) / 2 + 1px);} .tb-col--left .tb-w--straight{right:0; width:var(--tb-gut);} .tb-col--left .tb-w--v{right:calc(var(--tb-gut) / 2 - 1px);} .tb-col--left .tb-w--h1::after,.tb-col--left .tb-w--h2::after,.tb-col--left .tb-w--straight::after{transform-origin:left center;} .tb-w--v.is-down::after{transform-origin:center top;} .tb-w--v.is-up::after{transform-origin:center bottom;} /* ═══ 8. بطاقة المباراة ═══ */ .tb-match{ position:relative; z-index:1; overflow:hidden; background:var(--tb-card-bg); border:0; border-radius:18px; box-shadow:var(--tb-elev); padding:4px 6px 6px; transition:transform .2s var(--tb-ease), box-shadow .2s var(--tb-ease), background .2s var(--tb-ease); } .tb-match-in{position:relative; z-index:1;} /* طبقة الخلفيّة الحيّة داخل البطاقة */ .tb-fx{position:absolute; inset:0; z-index:0; border-radius:inherit; overflow:hidden; pointer-events:none;} .tb-fx-wash{ position:absolute; inset:0; background: radial-gradient(120% 90% at 50% 132%, var(--tb-wash), transparent 70%), radial-gradient(90% 80% at 100% -10%, var(--tb-wash-2), transparent 68%); } .tb-match:hover{transform:translateY(-2px); background:var(--tb-card-bg-hover); box-shadow:var(--tb-elev-hi), 0 0 0 1px var(--tb-gold-line);} .tb-match--live{box-shadow:var(--tb-elev), 0 0 0 1px var(--tb-live-line);} /* المنتهية: سطح مصقول (blur خفيف لما خلفها) + طبقة ظلّ داكنة فتبدو منتهية */ .tb-match--done{ background:var(--tb-card-done); box-shadow:var(--tb-elev-lo); -webkit-backdrop-filter:blur(5px) saturate(112%); backdrop-filter:blur(5px) saturate(112%); } .tb-match--done .tb-fx{background:var(--tb-done-veil);} .tb-match--done .tb-fx-wash{opacity:.3;} .tb-match--done:hover{ background:var(--tb-card-bg-hover); box-shadow:var(--tb-elev-hi), 0 0 0 1px var(--tb-gold-line); } .tb-match--done:hover .tb-fx{background:transparent;} .tb-match-top{display:flex; align-items:center; justify-content:flex-end; gap:6px; padding:0 2px 3px; min-height:24px;} .tb-num{font-family:var(--font-display); font-size:11px; font-weight:700; color:var(--dim); letter-spacing:.04em;} .tb-match-top-r{display:flex; align-items:center; gap:4px;} .tb-details-btn{width:24px; height:24px; border-radius:8px;} .tb-details-btn .tb-ic{width:14px; height:14px;} /* صفوف الفرق: كلّ صفّ سطح محدّد المعالم — تراتب بصريّ لا شطب */ .tb-team{ position:relative; display:flex; align-items:center; gap:8px; overflow:hidden; min-height:50px; padding:6px 12px; border-radius:var(--tb-r-sm); background:var(--tb-inset); transition:background .22s var(--tb-ease), color .22s var(--tb-ease); } .tb-team + .tb-team{margin-top:5px;} .tb-team-name{ flex:1 1 auto; min-width:0; font-weight:700; font-size:16px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:var(--tb-text-sh); } .tb-team--win{background:var(--tb-gold-wash), var(--tb-inset);} .tb-team--win::before{ /* شريط ذهبيّ رفيع على حافّة الفائز */ content:''; position:absolute; inset-inline-start:0; top:50%; transform:translateY(-50%); width:3px; height:58%; border-radius:99px; background:linear-gradient(180deg,var(--gold-soft),var(--gold)); } .tb-team--win .tb-team-name{font-weight:800; color:var(--gold-text);} html.dark .tb-team--win .tb-team-name{color:#f7e2a4;} .tb-team--out .tb-team-name{font-weight:500; color:var(--tb-loser-ink);} .tb-team--out.is-fresh{animation:tb-settle .42s var(--tb-ease) both;} @keyframes tb-settle{0%{opacity:1}45%{opacity:.3}100%{opacity:1}} .tb-team--ghost{background:var(--tb-inset); min-height:50px;} .tb-team--ghost .tb-team-name{font-weight:600; font-size:13.5px; color:var(--dim);} .tb-team.is-arrive{animation:tb-arrive .44s var(--tb-ease) both;} @keyframes tb-arrive{from{opacity:0;transform:translateX(var(--ax,14px))}to{opacity:1;transform:none}} .tb-row-acts{display:flex; align-items:center; gap:2px; opacity:0; transition:opacity .16s var(--tb-ease);} .tb-team:hover .tb-row-acts,.tb-row-acts:focus-within{opacity:1;} /* في الشجرة: الأدوات تطفو على حافّة الصفّ فلا تقتطع من مساحة الاسم */ .tb-bracket .tb-row-acts{ position:absolute; inset-inline-end:4px; top:50%; transform:translateY(-50%); padding-inline-start:16px; border-radius:12px; background:linear-gradient(to left, transparent, var(--tb-row-fade) 34%); } .tb-row-btn{width:34px; height:34px; border-radius:10px;} .tb-row-btn .tb-ic{width:16px; height:16px;} .tb-row-btn--go:hover{color:var(--gold-text); border-color:var(--tb-gold-line); background:var(--tb-gold-bg);} .tb-row-btn--out:hover{color:var(--danger); border-color:#c0392b40;} .tb-match-acts{display:flex; gap:6px; padding:6px 5px 2px;} .tb-match-acts .tb-btn{flex:1 1 auto; justify-content:center;} /* ═══ 9. النهائي والتاج والبطل ═══ */ /* ═══ 9أ. التاج (خارج البطاقة، فوقها) ═══ */ .tb-crown{ position:relative; width:150px; height:104px; display:grid; place-items:center; margin-bottom:6px; } .tb-crown-ic{position:relative; z-index:1; width:132px; height:99px;} .tb-crown--empty{opacity:.26; filter:saturate(.25);} .tb-crown--won{filter:drop-shadow(0 8px 18px #a8842c3d);} .tb-crown--won::after{ content:''; position:absolute; top:0; bottom:0; width:38%; background:linear-gradient(90deg,transparent,#fff6dd8c,transparent); transform:translateX(-160%) skewX(-14deg); opacity:0; } .tb-crown--won.is-fresh::after{animation:tb-sheen .9s ease-out .35s 1;} @keyframes tb-sheen{0%{transform:translateX(-160%) skewX(-14deg);opacity:0}25%{opacity:.95}100%{transform:translateX(320%) skewX(-14deg);opacity:0}} .tb-champ-label{ font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:.22em; color:var(--gold-text); } .tb-crown.is-fresh{animation:tb-crown-drop .52s var(--tb-ease) both;} @keyframes tb-crown-drop{from{opacity:0;transform:translateY(-18px) scale(.94)}to{opacity:1;transform:none}} /* ═══ 9. المركز: بطاقة النهائي في مركز الشجرة، وبرج التتويج فوقها ═══ */ .tb-col--center .tb-col-body{justify-content:center;} /* النهائي وحده في المجرى → يتمركز تماماً؛ والبرج مطلق فوقه فلا يُزيحه */ .tb-final-stack{position:relative; width:100%;} .tb-champ-tower{ position:absolute; bottom:100%; inset-inline:0; display:flex; flex-direction:column; align-items:center; } /* وصلة ذهبيّة راسيّة تربط النهائي بمنصّة البطل */ .tb-final-link{ width:2px; height:22px; flex:none; background:linear-gradient(to top, var(--tb-wire), var(--tb-wire-gold)); } .tb-champ-tower:has(.is-won) .tb-final-link{background:linear-gradient(to top, var(--gold), var(--tb-champ-hi));} /* بطاقة البطل — نفس معالجة بطاقة الاشتراك: إطار دوّار وحبيبات صاعدة */ .tb-champ-card{ position:relative; overflow:visible; border-radius:22px; width:100%; padding:14px 12px 14px; box-shadow:var(--tb-shadow-final); transition:box-shadow .3s var(--tb-ease); } .tb-champ-card .tb-fx--champ{border-radius:22px;} .tb-champ-card.is-fresh{animation:tb-champ-in .5s var(--tb-ease) both;} @keyframes tb-champ-in{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}} .tb-fx--champ .tb-fx-spin{ position:absolute; inset:-80%; background:conic-gradient(from 0deg, transparent 0deg 292deg, var(--gold-soft) 328deg, var(--tb-champ-hi) 344deg, transparent 360deg); animation:tb-spin 7.5s linear infinite; } .tb-fx--champ .tb-fx-cover{position:absolute; inset:1.5px; border-radius:20.5px; background:var(--tb-card-bg);} .tb-fx--champ .tb-fx-wash{ inset:1.5px; border-radius:20.5px; background: radial-gradient(130% 95% at 50% 140%, var(--tb-glow), transparent 72%), radial-gradient(90% 80% at 100% -15%, var(--tb-wash), transparent 66%); } /* بطاقة النهائي: فريقان وبينهما VS */ .tb-match--final{ padding:4px 10px 10px; border-radius:20px; border:0; background:transparent; box-shadow:var(--tb-elev-hi); } .tb-match--final .tb-fx-spin{display:none;} .tb-match--final .tb-fx-cover{position:absolute; inset:0; border-radius:20px; background:var(--tb-card-bg);} .tb-match--final .tb-fx-wash{ inset:0; border-radius:20px; background: radial-gradient(130% 95% at 50% 140%, var(--tb-wash), transparent 74%), radial-gradient(90% 80% at 100% -15%, var(--tb-wash-2), transparent 66%); } .tb-match--final .tb-fx-p{display:none;} .tb-match--final .tb-team{min-height:56px;} .tb-match--final .tb-team-name{font-size:17px;} .tb-match--final:hover{transform:none; background:transparent; box-shadow:var(--tb-elev-hi);} /* VS بأسلوب الرعد */ .tb-vs{ position:relative; display:flex; align-items:center; justify-content:center; height:34px; margin:1px 0; } .tb-vs-bolt{ position:absolute; inset-inline:4px; top:50%; height:16px; transform:translateY(-50%); background:linear-gradient(90deg,transparent,var(--tb-gold-line) 20%,var(--gold-soft) 50%,var(--tb-gold-line) 80%,transparent); clip-path:polygon(0% 46%,26% 46%,33% 8%,44% 54%,56% 54%,63% 8%,72% 46%,100% 46%,100% 56%,72% 56%,63% 94%,54% 48%,42% 48%,35% 94%,26% 56%,0% 56%); opacity:.6; animation:tb-bolt 5.5s ease-in-out infinite; } @keyframes tb-bolt{0%,88%,100%{opacity:.48}92%{opacity:1}95%{opacity:.62}} .tb-vs-plate{ position:absolute; top:50%; left:50%; width:54px; height:26px; transform:translate(-50%,-50%) skewX(-11deg); border-radius:8px; background:var(--tb-vs-plate-bg); box-shadow:inset 0 0 0 1px var(--tb-gold-line); } .tb-vs-txt{ position:relative; z-index:1; font-family:var(--font-display); font-weight:900; font-size:18px; line-height:1; letter-spacing:.04em; transform:skewX(-11deg); color:var(--tb-champ-hi); text-shadow:var(--tb-vs-sh); } .tb-champ-row{ display:flex; align-items:center; justify-content:center; min-height:36px; padding:0 6px; text-align:center; } .tb-champ-name{ font-family:var(--font-display); font-weight:800; font-size:27px; line-height:1.25; letter-spacing:-.02em; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background-image:linear-gradient(100deg,var(--gold-text) 28%,var(--tb-champ-hi) 46%,var(--gold-text) 64%); background-size:230% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; text-shadow:none; animation:tb-txt 5.5s linear infinite; } @keyframes tb-txt{0%{background-position:170% 0}100%{background-position:-70% 0}} .tb-champ-name--wait{ font-weight:400; font-size:22px; letter-spacing:.14em; background-image:none; color:var(--dim); -webkit-text-fill-color:currentColor; opacity:.6; animation:none; } .tb-fx-p{ position:absolute; bottom:-16px; width:10px; height:11px; opacity:0; background:var(--gold-soft); clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%); } .tb-fx-p.p1{right:19%; animation:tb-rise 9s linear 1.2s infinite;} .tb-fx-p.p2{right:52%; width:7px; height:8px; animation:tb-rise 11.5s linear 4s infinite;} .tb-fx-p.p3{left:21%; width:8px; height:9px; animation:tb-rise 10s linear 6.6s infinite;} @keyframes tb-spin{to{transform:rotate(360deg)}} @keyframes tb-rise{ 0%{transform:translateY(0) rotate(0deg);opacity:0} 14%{opacity:.62} 76%{opacity:.16} 100%{transform:translateY(-190px) rotate(140deg);opacity:0} } /* ═══ 10. الجوّال ═══ */ .tb-mobile{position:relative; z-index:1;} .tb-tabs{ position:sticky; top:61px; z-index:20; display:flex; gap:6px; overflow-x:auto; padding:10px 0; margin-bottom:2px; background:var(--tb-head-bg); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--panel-line); scrollbar-width:none; } .tb-tabs::-webkit-scrollbar{display:none;} .tb-tab{ display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 15px; border-radius:999px; border:0; background:var(--surf); box-shadow:inset 0 0 0 1px var(--surf-line); font-size:13.5px; font-weight:600; color:var(--dim); white-space:nowrap; cursor:pointer; } .tb-tab[aria-selected="true"]{ background:var(--tb-gold-bg); box-shadow:inset 0 0 0 1px var(--tb-gold-line); color:var(--gold-text); font-weight:700; } .tb-mlist{display:flex; flex-direction:column; gap:14px; padding:14px 0 4px;} .tb-mlist .tb-match{width:100%;} .tb-mlist .tb-row-acts{opacity:1;} .tb-mfinal{display:flex; flex-direction:column; align-items:stretch; gap:0; padding:14px 0 4px; max-width:440px; margin:0 auto;} .tb-mfinal .tb-match{width:100%;} .tb-mfinal .tb-champ-tower{position:static; inset:auto;} .tb-minimap-btn{width:100%; justify-content:center; margin-top:16px;} .tb-minimap{ margin-top:10px; padding:14px 12px; border-radius:18px; background:var(--tb-card-bg); box-shadow:var(--tb-elev); } .tb-mm-row{display:flex; align-items:center; gap:8px; padding:5px 0;} .tb-mm-lbl{width:82px; flex:none; font-size:11.5px; font-weight:600; color:var(--dim);} .tb-mm-dots{display:flex; flex-wrap:wrap; gap:5px;} .tb-mm-dot{ width:28px; height:28px; border-radius:9px; border:0; box-shadow:inset 0 0 0 1px var(--surf-line); background:var(--surf); color:var(--dim); font-size:11px; font-weight:700; cursor:pointer; display:grid; place-items:center; padding:0; } .tb-mm-dot--done{background:var(--tb-gold-bg); box-shadow:inset 0 0 0 1px var(--tb-gold-line); color:var(--gold-text);} .tb-mm-dot--live{box-shadow:inset 0 0 0 1px var(--gold-soft); color:var(--gold-text);} /* ═══ 11. النوافذ والتوستات ═══ */ .tb-dialog{ width:min(440px,calc(100vw - 32px)); max-height:min(86vh,760px); margin:auto; padding:0; border:1px solid var(--panel-line); border-radius:20px; background:var(--panel); color:var(--ink); box-shadow:0 26px 70px #00000038; overflow:hidden; } .tb-dialog::backdrop{background:var(--scrim);} .tb-dialog-in{padding:22px; max-height:min(86vh,760px); overflow-y:auto;} .tb-dialog-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;} .tb-dialog-title{font-family:var(--font-display); font-size:18px; font-weight:800;} .tb-dialog-team{font-family:var(--font-display); font-size:21px; font-weight:800; color:var(--gold-text); margin:10px 0 4px;} .tb-dialog-msg{font-size:14.5px; color:var(--ink); margin-bottom:14px;} .tb-field{display:block; margin-bottom:12px;} .tb-label{display:block; font-size:12.5px; font-weight:600; color:var(--dim); margin-bottom:5px;} .tb-input{ width:100%; min-height:44px; padding:0 12px; border-radius:12px; border:1px solid var(--field-line); background:var(--field); color:var(--ink); font:inherit; font-size:14px; } .tb-notice{ display:flex; gap:9px; align-items:flex-start; padding:10px 12px; border-radius:14px; background:var(--tb-gold-bg); box-shadow:inset 0 0 0 1px var(--tb-gold-line); font-size:12.5px; color:var(--gold-text); margin-bottom:16px; } .tb-notice .tb-ic{width:17px; height:17px; margin-top:3px;} .tb-dialog-acts{display:flex; gap:8px;} .tb-dialog-acts .tb-btn{flex:1 1 auto; justify-content:center;} .tb-dl{display:grid; grid-template-columns:auto 1fr; gap:9px 14px; font-size:14px;} .tb-dl dt{color:var(--dim); font-size:12.5px; font-weight:600;} .tb-dl dd{margin:0; font-weight:600;} .tb-dl dd b{font-family:var(--font-display);} .tb-details-acts{margin-top:18px; display:flex; gap:8px;} .tb-details-acts .tb-btn{flex:1 1 auto; justify-content:center;} .tb-toasts{ position:fixed; inset-block-end:18px; inset-inline-start:50%; transform:translateX(50%); z-index:60; display:flex; flex-direction:column; gap:8px; align-items:center; width:min(460px,calc(100vw - 24px)); pointer-events:none; } .tb-toast{ pointer-events:auto; display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border-radius:16px; border:1px solid var(--panel-line); background:var(--panel); box-shadow:0 14px 36px #00000029; font-size:13.5px; font-weight:600; animation:tb-toast-in .28s var(--tb-ease) both; } @keyframes tb-toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .tb-toast-txt{flex:1 1 auto;} .tb-toast .tb-btn--sm{flex:none;} .tb-toast-x{width:32px; height:32px;} .tb-toast-x .tb-ic{width:16px; height:16px;} /* ═══ 12. الحالات ═══ */ .tb-skeleton{position:relative; z-index:1; display:flex; justify-content:center; padding:44px 0;} .tb-sk-col{display:flex; flex-direction:column; justify-content:space-around; gap:16px; width:242px; padding:0 15px;} .tb-sk-card{height:122px; border-radius:18px; background:var(--tb-card-bg); box-shadow:var(--tb-elev); animation:tb-shimmer 1.6s ease-in-out infinite;} .tb-sk-card--final{height:170px;} @keyframes tb-shimmer{0%,100%{opacity:.45}50%{opacity:.9}} .tb-state{ position:relative; z-index:1; max-width:560px; margin:56px auto; padding:34px 28px; text-align:center; border-radius:22px; background:var(--tb-card-bg); box-shadow:var(--tb-elev); } .tb-state-ic{ display:grid; place-items:center; width:54px; height:54px; margin:0 auto 16px; border-radius:50%; background:var(--tb-gold-bg); box-shadow:inset 0 0 0 1px var(--tb-gold-line); color:var(--gold-text); } .tb-state-ic .tb-ic{width:24px; height:24px;} .tb-state-t{font-family:var(--font-display); font-size:20px; font-weight:800; margin-bottom:6px;} .tb-state-p{font-size:14px; color:var(--dim); margin-bottom:20px;} .tb-state-acts{display:flex; gap:8px; justify-content:center;} .tb-state--error .tb-state-ic{background:#c0392b14; box-shadow:inset 0 0 0 1px #c0392b40; color:var(--danger);} /* ═══ 12ب. الذيل ═══ */ .tb-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px; margin-top:26px; padding:24px 0 34px; border-top:1px solid var(--panel-line); } .tb-foot-acts{display:flex; gap:8px; flex-wrap:wrap;} .tb-foot-brand{ font-family:var(--font-display); font-weight:900; font-size:22px; color:var(--ink); opacity:.5; line-height:1.2; } /* ═══ 14. الانكشاف المنسَّق (≤900ms) ═══ */ .tb-bracket[data-reveal] .tb-col{animation:tb-reveal .42s var(--tb-ease) both; animation-delay:calc(var(--i,0) * 90ms);} .tb-bracket[data-reveal] .tb-col--right{--rx:18px;} .tb-bracket[data-reveal] .tb-col--left{--rx:-18px;} .tb-bracket[data-reveal] .tb-col--center{--rx:0px;} @keyframes tb-reveal{from{opacity:0;transform:translateX(var(--rx,0)) translateY(5px)}to{opacity:1;transform:none}} .tb-bracket[data-reveal] .tb-crown{animation:tb-crown-drop .46s var(--tb-ease) both; animation-delay:440ms;} .tb-bracket[data-reveal] .tb-champ-card{animation:tb-champ-in .5s var(--tb-ease) both; animation-delay:380ms;} .tb-bracket[data-reveal] .tb-crown--won::after{animation:tb-sheen .9s ease-out .62s 1;} /* ═══ 15. الاستجابة ═══ */ @media (max-width:1023px){ .tb-main{padding:0 16px 8px;} .tb-head-in{padding:6px 16px;} .tb-head-back span{display:none;} .tb-head-back{padding:0 12px;} .tb-intro{grid-template-columns:1fr; align-items:start; padding:26px 0 14px;} .tb-intro-acts{flex-wrap:wrap;} .tb-decor{inset:-40px -16px -10px;} .tb-halftone{--tb-ht-w:min(980px,150vw);} .tb-emblem{--tb-em-w:min(760px,140vw);} .tb-team-name{font-size:17px;} .tb-champ-name{font-size:29px;} } @media (max-width:420px){ .tb-intro-acts .tb-btn{flex:1 1 140px; justify-content:center;} .tb-mm-lbl{width:66px;} .tb-team{padding:6px 10px;} .tb-foot{padding-bottom:64px;} .tb-foot-acts .tb-btn{flex:1 1 130px; justify-content:center;} } /* ═══ 16. صفحة الإنشاء (‎/t/new) وإضافات الربط — بلغة اللوحة نفسها ورموزها ═══ */ /* إصلاح عن التسليم (علّة رسم): اسم البطل كان يُرسم تحت طبقة الخلفيّة الحيّة — ‎.tb-fx موضوعة بـz-index:0 والصفّ غير موضوع — فتظهر بطاقة البطل فارغة بعد التتويج (الشرطات «————» وحدها كانت تنجو لأنّ شفافيّتها تنشئ سياق تكديس). يُرفع الصفّ فوق الطبقة كما تفعل ‎.tb-match-in في بقيّة البطاقات؛ لا تغيير بصريّ آخر. */ .tb-champ-row{position:relative; z-index:1;} .tb-btn[disabled]{opacity:.55; cursor:default; pointer-events:none;} /* حذف البطولة (المنظّم): الزرّ هادئ في الترويسة ويحمرّ عند التحويم كزرّ الاستبعاد؛ وزرّ التأكيد النهائيّ أحمر صريح */ .tb-btn--del:hover{color:var(--danger); border-color:#c0392b40; background:#c0392b0f;} .tb-btn--danger{background:#c0392b14; border-color:#c0392b52; color:var(--danger); font-weight:700;} .tb-btn--danger:hover{background:#c0392b24; border-color:var(--danger);} html.dark .tb-btn--del:hover, html.dark .tb-btn--danger{color:#ec8579;} /* أحمر أفتح ليلاً ليبلغ تباين النصّ */ .tn-flash{max-width:880px; margin:0 auto 16px; position:relative; z-index:1;} .tb-input[aria-invalid="true"]{border-color:var(--danger); box-shadow:0 0 0 3px #c0392b1f;} .tb-input::placeholder{color:var(--dim); opacity:.7;} .tn-main{max-width:880px;} .tn-hero{padding:34px 0 20px; text-align:center;} .tn-hero .tb-title{margin-bottom:10px;} .tn-sub{font-size:15px; color:var(--dim); max-width:580px; margin:0 auto;} .tn-main .tb-state{margin:18px auto 30px;} .tn-card{ position:relative; z-index:1; padding:24px; border-radius:22px; background:var(--tb-card-bg); box-shadow:var(--tb-elev); } .tn-grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 16px;} .tn-sizes{display:flex; gap:8px; flex-wrap:wrap;} .tn-count{font-family:var(--font-display); font-weight:700; color:var(--gold-text); margin-inline-start:6px;} .tn-teams{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 16px;} .tn-team{display:flex; align-items:center; gap:9px; min-width:0;} .tn-team .tb-input{flex:1 1 auto; min-width:0;} .tn-team-n{ display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:50%; background:var(--tb-gold-bg); box-shadow:inset 0 0 0 1px var(--tb-gold-line); color:var(--gold-text); font-family:var(--font-display); font-weight:700; font-size:12.5px; } .tn-hint{font-size:12.5px; color:var(--dim); margin-top:10px;} .tn-err{margin:0 0 12px; font-size:13.5px; font-weight:700; color:var(--danger);} .tn-err:empty{display:none;} .tn-actions{display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap;} .tn-next{font-size:13px; color:var(--dim);} .tn-mine{position:relative; z-index:1; margin-top:30px;} .tn-mine-t{font-family:var(--font-display); font-size:18px; font-weight:800; margin-bottom:12px;} .tn-mine-list{display:flex; flex-direction:column; gap:8px;} .tn-mine-row{ display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; min-height:52px; padding:8px 16px; border-radius:16px; background:var(--tb-card-bg); box-shadow:var(--tb-elev-lo); color:var(--ink); transition:box-shadow .2s var(--tb-ease), transform .2s var(--tb-ease); } .tn-mine-row:hover{color:var(--ink); transform:translateY(-1px); box-shadow:var(--tb-elev), 0 0 0 1px var(--tb-gold-line);} .tn-mine-name{flex:1 1 200px; min-width:0; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .tn-mine-meta{font-size:13px; color:var(--dim);} @media (max-width:640px){ .tn-grid2,.tn-teams{grid-template-columns:1fr;} .tn-card{padding:18px 14px;} .tn-hero{padding:26px 0 16px;} .tn-actions .tb-btn{flex:1 1 100%; justify-content:center;} } @media (prefers-reduced-motion:reduce){ .tb-col--center::before,.tb-chip--live .tb-dot,.tb-fx-spin,.tb-fx-p,.tb-shards i,.tb-vs-bolt{animation:none!important;} .tb-shards i{opacity:var(--o);} .tb-fx-p{display:none;} .tb-fx--final .tb-fx-spin{background:conic-gradient(from 200deg,#a8842c26,var(--gold-soft) 30%,#a8842c26 60%,var(--gold-soft) 85%,#a8842c26);} .tb-champ-name{background-image:none; color:var(--gold-text); -webkit-text-fill-color:currentColor;} *,*::before,*::after{ animation-duration:.001ms!important; animation-delay:0s!important; animation-iteration-count:1!important; transition-duration:.001ms!important; } } @media print{ .tb-head,.tb-toasts,.tb-row-acts,.tb-match-acts,.tb-decor{display:none!important;} }