/* Front page: live match cards under "Watch it live". WildStar-style: dark glass, cyan rim, amber score. */
.hw { margin-top: 40px; }
.hw-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.hw-title { margin: 0; flex: 1 1 auto; font: 700 20px/1 var(--ev-display, inherit); text-transform: uppercase; letter-spacing: .05em; text-shadow: 0 2px 0 rgba(0,0,0,.85); }
.hw-all { display: inline-flex; align-items: center; gap: 6px; color: var(--ev-cy); text-decoration: none; font-weight: 600; }
.hw-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; font: 700 12px/1 inherit; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: linear-gradient(#d23a52, #8f1c32); border: 1px solid #ff9db1; clip-path: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
.hw-pulse { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; animation: hw-pulse 1.1s ease-in-out infinite; }
@keyframes hw-pulse { 50% { opacity: .25; transform: scale(.7); } }
.hw-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .hw-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .hw-grid { grid-template-columns: repeat(3, 1fr); } }
.hw-grid.hw-one { grid-template-columns: 1fr; }
.hw-skel { min-height: 150px; background: rgba(6,20,30,.6); border: 1px solid var(--ev-cy-lo); }
.hw-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 190px; padding: 14px 16px; overflow: hidden; isolation: isolate; color: inherit; text-decoration: none; border: 1px solid var(--ev-cy-lo); background: #06141e; box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 36px rgba(94,224,232,.1); transition: transform .16s cubic-bezier(.2,.9,.3,1.3), box-shadow .16s; }
.hw-card:hover, .hw-card:focus-visible { transform: translateY(-3px); box-shadow: 0 22px 56px rgba(0,0,0,.6), 0 0 48px rgba(94,224,232,.28); }
.hw-card:focus-visible { outline: 2px solid var(--ev-cy); outline-offset: 2px; }
.hw-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .55; }
.hw-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4,12,18,.55), rgba(4,12,18,.88)); }
.hw-scan { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(94,224,232,.05) 0 1px, transparent 1px 3px); }
.hw-scan::after { content: ""; position: absolute; left: 0; right: 0; height: 40%; top: -40%; background: linear-gradient(180deg, transparent, rgba(94,224,232,.16), transparent); animation: hw-sweep 5s linear infinite; }
@keyframes hw-sweep { to { top: 100%; } }
.hw-top { display: flex; align-items: center; gap: 10px; }
.hw-mode { display: inline-flex; align-items: center; gap: 6px; color: var(--ev-cy-hi); font-weight: 600; font-size: 13px; }
.hw-clock { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 18px; text-shadow: 0 2px 0 rgba(0,0,0,.85); }
.hw-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.hw-team { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hw-team b { font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 3px 0 rgba(0,0,0,.85); }
.hw-team span { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-a b { color: #6fc3ff; } .hw-a span { color: #6fc3ff; }
.hw-b { text-align: right; align-items: flex-end; } .hw-b b, .hw-b span { color: #ff8a9e; }
.hw-x { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ev-amber); border: 1px solid rgba(255,212,121,.4); padding: 3px 7px; background: rgba(0,0,0,.4); }
.hw-map { font-size: 13px; color: rgba(255,255,255,.8); }
/* nobody playing: one wide, calm card with the latest result */
.hw-idle { flex-direction: row; flex-wrap: wrap; align-items: center; min-height: 170px; gap: 18px 32px; }
.hw-idle .hw-art { opacity: .45; animation: hw-drift 24s ease-in-out infinite alternate; }
@keyframes hw-drift { from { transform: scale(1.04); } to { transform: scale(1.14) translate(-1.5%, -1%); } }
.hw-idle-t { display: flex; flex-direction: column; gap: 4px; flex: 1 1 260px; }
.hw-idle-t b { font-size: 24px; text-transform: uppercase; letter-spacing: .04em; text-shadow: 0 2px 0 rgba(0,0,0,.85); }
.hw-idle-t span { color: rgba(255,255,255,.8); }
.hw-recent { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; background: rgba(4,12,18,.75); border: 1px solid rgba(255,212,121,.35); border-left: 3px solid var(--ev-amber); }
.hw-recent small { text-transform: uppercase; letter-spacing: .12em; color: var(--ev-amber); font-size: 11px; }
.hw-recent b { font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .hw-pulse, .hw-scan::after, .hw-idle .hw-art { animation: none; } .hw-card { transition: none; } .hw-scan::after { display: none; } }