/* Tournaments guide: live tournaments strip above the hero. Same cards as buycrypt.com/updated (.uh-tc2),
   copied from assets/updated_home/updated_home.css so the guide does not load the whole home stylesheet. */
.tgl { --green: #30BF73; --yellow: #F5CC3B; --t1: #F9F9FB; --t2: #C9CFDB; --t3: #919AAE; --t4: #5C6271; --g400: #1F2535; padding: 28px 0 8px; position: relative; }
.tgl[hidden] { display: none; }
.tgl-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 18px; }
.tgl-head > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; min-width: 0; }
.tgl-sub { color: var(--t3); font-size: 14px; line-height: 1.5; }
.uh-live-tag { display: inline-flex; align-items: center; gap: 8px; font: 700 13px/1 Inter, sans-serif; color: var(--green); }
.uh-live-tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: uhnPulse 1.8s infinite; }
@keyframes uhnPulse { 0% { box-shadow: 0 0 0 0 rgba(48,191,115,.55); } 70% { box-shadow: 0 0 0 7px rgba(48,191,115,0); } 100% { box-shadow: 0 0 0 0 rgba(48,191,115,0); } }
.uh-live-all { flex: none; color: #9CB8FF; font: 600 14px/1 Inter, sans-serif; padding: 11px 15px; border-radius: 12px; border: 1px solid rgba(156,184,255,.3); background: rgba(39,103,229,.08); transition: background .2s; }
.uh-live-all:hover { background: rgba(39,103,229,.16); color: #fff; }
.uh-live-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
.uh-live-row::-webkit-scrollbar { display: none; }
@media (max-width: 959px) { .uh-live-row { grid-auto-columns: minmax(280px, 82%); margin-inline: -20px; padding-inline: 20px; scroll-padding-inline: 20px; } }
@media (min-width: 960px) { .uh-live-row { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; } }
.uh-tc2 { scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0; border-radius: 20px; overflow: hidden; color: inherit; text-decoration: none;
  background: linear-gradient(180deg, #131826, #10131B); border: 1px solid var(--g400); box-shadow: 0 30px 60px -36px rgba(0,0,0,.9); transition: border-color .2s, transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s; }
.uh-tc2:hover { border-color: #33405E; transform: translateY(-3px); box-shadow: 0 40px 70px -36px rgba(50,144,255,.35); }
.uh-tc2-cover { position: relative; height: 128px; background: #0C0F17; overflow: hidden; }
.uh-tc2-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform .5s ease; }
.uh-tc2:hover .uh-tc2-cover img { transform: scale(1.07); }
.uh-tc2-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,12,18,0) 35%, rgba(16,19,27,.96)); }
.uh-tc2-st, .uh-tc2-ty { position: absolute; top: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; font: 700 11px/1 Inter, sans-serif; padding: 6px 9px; border-radius: 8px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.uh-tc2-st { left: 12px; color: var(--green); background: rgba(10,30,20,.7); border: .8px solid rgba(48,191,115,.45); }
.uh-tc2-st.soon { color: var(--yellow); background: rgba(35,30,10,.7); border-color: rgba(245,204,59,.45); }
.uh-tc2-st i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: uhnPulse 1.8s infinite; }
.uh-tc2-ty { right: 12px; color: #C9D6FF; background: rgba(15,20,35,.7); border: .8px solid rgba(156,184,255,.35); letter-spacing: .04em; }
.uh-tc2-body { display: flex; flex-direction: column; gap: 12px; padding: 4px 18px 18px; flex: 1; }
.uh-tc2-nm { font: 800 17px/1.25 Inter, sans-serif; color: var(--t1); letter-spacing: -.01em; unicode-bidi: plaintext; }
.uh-tc2-meta { margin-top: -6px; font-size: 12.5px; color: var(--t3); }
.uh-tc2-prize { padding: 12px 14px; border-radius: 14px; background: rgba(245,204,59,.06); border: 1px solid rgba(245,204,59,.18); }
.uh-tc2-prize span { display: block; font-size: 11.5px; color: var(--t3); }
.uh-tc2-prize b { display: block; margin-top: 4px; font: 900 24px/1.1 Inter, sans-serif; color: var(--yellow); letter-spacing: -.02em; font-variant-numeric: tabular-nums; unicode-bidi: plaintext; }
.uh-tc2-prize em { display: block; margin-top: 4px; font-style: normal; font-size: 12px; color: var(--t3); }
.uh-tc2-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.uh-tc2-row span { display: block; font-size: 11.5px; color: var(--t4); }
.uh-tc2-row b { display: block; margin-top: 4px; font: 700 15px/1.2 Inter, sans-serif; color: var(--t1); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uh-tc2-row b.free { color: var(--green); }
.uh-tc2-bar { height: 4px; border-radius: 4px; background: var(--g400); overflow: hidden; margin-top: -2px; }
.uh-tc2-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--green), var(--yellow)); transition: width .8s ease; }
[dir="rtl"] .uh-tc2-bar i { background: linear-gradient(270deg, var(--green), var(--yellow)); margin-inline-start: 0; }
.uh-tc2-cta { margin-top: auto; display: block; text-align: center; padding: 12px 14px; border-radius: 12px; font: 700 14px/1 Inter, sans-serif; color: #fff; background: #2767E5; box-shadow: 0 10px 24px -12px rgba(39,103,229,.8); transition: background .2s; }
.uh-tc2:hover .uh-tc2-cta { background: #3477F5; }
.uh-tc2-cta.off { background: var(--g400); color: var(--t2); box-shadow: none; }
.uh-tc2-more { justify-content: center; gap: 12px; padding: 28px 22px; text-align: start; background: radial-gradient(120% 80% at 100% 0%, rgba(39,103,229,.18), transparent 60%), linear-gradient(180deg, #131826, #10131B); border-style: dashed; border-color: #2B3550; }
.uh-tc2-more .ic { width: 48px; height: 48px; border-radius: 14px; background: rgba(39,103,229,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CB8FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='3'/%3E%3Cpath d='M3 9h18M8 2v4M16 2v4'/%3E%3C/svg%3E") center/24px no-repeat; }
.uh-tc2-more b { font: 800 20px/1.25 Inter, sans-serif; color: var(--t1); letter-spacing: -.01em; }
.uh-tc2-more .d { font-size: 14px; line-height: 1.5; color: var(--t3); }
.uh-tc2-more .uh-tc2-cta { margin-top: 8px; background: transparent; border: 1px solid rgba(156,184,255,.35); color: #9CB8FF; box-shadow: none; }
.uh-tc2-more:hover .uh-tc2-cta { background: rgba(39,103,229,.16); color: #fff; }
[dir="rtl"] .uh-tc2-st { left: auto; right: 12px; }
[dir="rtl"] .uh-tc2-ty { right: auto; left: 12px; }
/* skeleton while loading: same height as a card, so nothing jumps */
.tgl-sk { height: 404px; border-radius: 20px; border: 1px solid var(--g400); background: linear-gradient(90deg, #12161F, #181D29, #12161F); background-size: 200% 100%; animation: tglSk 1.4s linear infinite; scroll-snap-align: start; }
@keyframes tglSk { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .uh-live-tag i, .uh-tc2-st i, .tgl-sk { animation: none; } }