:root{--bg:#0a0a0f;--card:#14141c;--line:#23232f;--txt:#ececf3;--dim:#7b7b8e}
*{box-sizing:border-box;margin:0}
html{background:var(--bg)}
body{min-height:100vh;color:var(--txt);font:16px/1.4 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:radial-gradient(60rem 40rem at 15% -10%,#1b1536 0,transparent 60%),radial-gradient(50rem 35rem at 100% 110%,#0f2a2e 0,transparent 60%),var(--bg);
  display:grid;place-items:center;padding:2rem 1.25rem}
main{width:min(880px,100%)}
header{margin-bottom:2.2rem}
.clock{color:var(--dim);font-size:.9rem;letter-spacing:.14em;text-transform:uppercase}
h1{font-size:clamp(2.4rem,7vw,3.8rem);font-weight:700;letter-spacing:-.04em;margin-top:.3rem;
  background:linear-gradient(120deg,#fff 30%,#a99bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}
.tile{--c:#7c5cff;position:relative;aspect-ratio:1;border-radius:26px;padding:1.1rem;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;
  background:linear-gradient(160deg,var(--card),#0f0f16);border:1px solid var(--line);
  transition:transform .25s cubic-bezier(.2,.9,.3,1.3),border-color .25s,box-shadow .25s;animation:in .5s both}
.tile::before{content:"";position:absolute;inset:auto -30% -45% auto;width:80%;aspect-ratio:1;border-radius:50%;
  background:var(--c);opacity:.18;filter:blur(28px);transition:opacity .25s}
.tile:hover,.tile:focus-visible{transform:translateY(-6px) rotate(-1deg);border-color:color-mix(in srgb,var(--c) 60%,transparent);
  box-shadow:0 18px 40px -18px var(--c);outline:none}
.tile:hover::before{opacity:.4}
.ico{width:2.6rem;height:2.6rem;border-radius:14px;display:grid;place-items:center;font-size:1.3rem;font-weight:700;
  color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent);position:relative}
.name{font-size:1.1rem;font-weight:600;letter-spacing:-.02em;position:relative}
.desc{font-size:.78rem;color:var(--dim);position:relative}
.tile.dim{opacity:.45}
.tile.checking{opacity:.6}
@keyframes in{from{opacity:0;transform:translateY(12px) scale(.97)}}
footer{margin-top:2.2rem;display:flex;gap:.8rem;align-items:center;justify-content:space-between;flex-wrap:wrap;color:var(--dim);font-size:.82rem}
.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .8rem;border:1px solid var(--line);border-radius:99px}
.chip i{width:.5rem;height:.5rem;border-radius:50%;background:#555}
.chip.home i{background:#4ade80;box-shadow:0 0 10px #4ade80}
.chip.away i{background:#fbbf24;box-shadow:0 0 10px #fbbf24}
button{font:inherit;color:var(--dim);background:none;border:0;cursor:pointer;padding:.3rem .2rem}
button:hover{color:var(--txt)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}