:root {
   --bg: #0b1225;
   --card: #0f1833;
   --ink: #eaf1ff;
   --muted: #a9b6d9;
   --primary: gold;
   --accent: darkgoldenrod;
   --line: #1f2a4d;
   --success: #16a34a;
   --danger: #dc2626;
   --shadow: 0 10px 25px rgba(0, 0, 0, .25);
   --radius: 18px;
   --panel: grey;
 }

 * {
   box-sizing: border-box
 }

 html,
 body {
   margin: 0;
   background: linear-gradient(180deg, #0b1225 0%, #0a1020 100%);
   color: var(--ink);
   font-family: Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif
 }

 a {
   color: var(--primary);
   text-decoration: none
 }

 a:hover {
   text-decoration: underline
 }

 .wrap {
   max-width: 1100px;
   margin: 0 auto;
   padding: 0 20px
 }

 header {
   position: sticky;
   top: 0;
   backdrop-filter: blur(8px);
   background: rgba(11, 18, 37, .6);
   border-bottom: 1px solid var(--line);
   z-index: 50
 }

 nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 64px
 }

 .brand {
   display: flex;
   align-items: center;
   gap: 12px
 }

 .badge {
   display: inline-grid;
   place-items: center;
   width: 44px;
   height: 44px;
   background: radial-gradient(120% 120% at 0% 0%, var(--accent), var(--primary));
   color: white;
   border-radius: 12px;
   box-shadow: var(--shadow);
   font-weight: 800
 }

 .brand h1 {
   font-family: Montserrat, Inter, sans-serif;
   font-size: 1.1rem;
   letter-spacing: .4px;
   margin: 0
 }

 .tag {
   display: inline-block;
   margin-left: 8px;
   padding: .2rem .5rem;
   border-radius: 999px;
   background: #10214a;
   color: #9acbff;
   font-size: .75rem
 }

 .menu {
   display: flex;
   gap: 20px;
   align-items: center
 }

 .menu a {
   color: var(--ink);
   opacity: .9
 }

 .menu a.active,
 .menu a:hover {
   color: white
 }

 .hamburger {
   display: none;
   background: none;
   border: 0;
   color: var(--ink);
   font-size: 1.6rem
 }

 @media (max-width:840px) {
   .menu {
     display: none
   }

   .hamburger {
     display: block
   }
 }

 /* hero */
 .hero {
   padding: 56px 0 28px;
   border-bottom: 1px solid var(--line);
   background: radial-gradient(80% 60% at 80% -10%, rgba(124, 58, 237, .25), transparent 60%), radial-gradient(60% 40% at 10% -20%, rgba(45, 212, 191, .18), transparent 50%)
 }

 .hero h2 {
   font-family: Montserrat, Inter, sans-serif;
   font-weight: 800;
   font-size: clamp(1.8rem, 3.6vw, 3rem);
   line-height: 1.1;
   margin: 0 0 10px
 }

 .hero p {
   color: var(--muted);
   max-width: 720px
 }

 .cta {
   display: flex;
   gap: 12px;
   margin-top: 18px;
   flex-wrap: wrap
 }

 .btn {
   border: 0;
   border-radius: 12px;
   padding: .85rem 1rem;
   font-weight: 600
 }

 .btn.primary {
   background: linear-gradient(90deg, var(--accent), var(--primary));
   color: white;
   box-shadow: var(--shadow)
 }

 .btn.ghost {
   background: #121a34;
   border: 1px solid var(--line);
   color: var(--ink)
 }

 /* sections */
 section {
   padding: 40px 0;
   border-bottom: 1px solid var(--line)
 }

 h3 {
   font-family: Montserrat, Inter, sans-serif;
   margin: 0 0 18px
 }

 .grid {
   display: grid;
   gap: 16px
 }

 @media (min-width:880px) {
   .grid.cols-3 {
     grid-template-columns: repeat(3, 1fr)
   }

   .grid.cols-2 {
     grid-template-columns: 1fr 1fr
   }
 }

 .card {
   background: var(--card);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 18px;
   box-shadow: var(--shadow)
 }

 .muted {
   color: var(--muted)
 }

 .list {
   margin: 0;
   padding: 0;
   list-style: none
 }

 .list li {
   display: flex;
   justify-content: space-between;
   gap: 10px;
   padding: 12px;
   border-bottom: 1px dashed #22315a
 }

 .list li:last-child {
   border-bottom: 0
 }

 .chip {
   border-radius: 999px;
   padding: .25rem .6rem;
   background: #112145;
   border: 1px solid #1f3264;
   color: #9acbff;
   font-size: .75rem
 }

 .status.win {
   color: var(--success)
 }

 .status.loss {
   color: var(--danger)
 }

 .status.draw {
   color: #eab308
 }

 .coach {
   display: flex;
   gap: 12px;
   align-items: center
 }

 .avatar {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: #1a2752;
   display: grid;
   place-items: center;
   font-weight: 700
 }

 .table {
   width: 100%;
   border-collapse: collapse
 }

 .table th,
 .table td {
   padding: 10px;
   border-bottom: 1px solid #1f2a4d;
   text-align: left
 }

 .table th {
   color: #b9c6ea;
   font-size: .9rem
 }

 .notice {
   font-size: .9rem;
   color: #b2c3f3
 }

 footer {
   padding: 28px 0;
   color: #aab5d6
 }

 .footergrid {
   display: grid;
   gap: 12px
 }

 @media (min-width:720px) {
   .footergrid {
     grid-template-columns: 2fr 1fr 1fr
   }
 }

 .sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0
 }

 button,
 .btn,
 input[type="submit"],
 input[type="button"] {
   cursor: pointer;
 }

 /* Modal */
 .modal {
   position: fixed;
   inset: 0;
   display: none;
 }

 .modal[aria-hidden="false"] {
   display: block;
 }

 .modal__backdrop {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, .55);
 }

 .modal__content {
   position: relative;
   z-index: 1;
   max-width: 420px;
   margin: 8vh auto 0;
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   box-shadow: var(--shadow);
   padding: 18px;
 }

 .modal__content label {
   display: block;
   margin: 10px 0;
 }

 .modal__content input {
   width: 100%;
   padding: 10px;
   border-radius: 10px;
   border: 1px solid #20305f;
   background: #0d1530;
   color: var(--ink);
 }

 .modal__close {
   position: absolute;
   right: 8px;
   top: 8px;
   border: 0;
   background: transparent;
   font-size: 1.4rem;
   line-height: 1;
   color: var(--ink);
   cursor: pointer;
 }

 /* Give pointer cursor to clickable items */
 #loginLink,
 .modal__close,
 .btn {
   cursor: pointer;
 }
 
/* When login is open, shrink the main wrap */
body.login-open .mobilemenu {
	display: none !important;
}