:root{
      --bg:#000000;
      --fg:#00a23c;
      --fg-dim:#007530;
      --card:rgba(0, 20, 8, .55);
      --card-border:rgba(0, 255, 102, .22);
      --shadow:rgba(0, 255, 102, .08);
    }

    *{ box-sizing:border-box; }

    html,body{
      height:100%;
      margin:0;
      background: #000000 url('background.png') no-repeat right top;
      background-size: auto 100%;
      color:var(--fg);
      font: 600 16px/1.5 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
    }

    body{
      display:flex;
      align-items:center;
      justify-content:center;
      padding:48px 18px;
      overflow:hidden;
      position:relative;
    }

    /* Soft vignette overlay */
    .overlay{
      position:fixed;
      inset:0;
      pointer-events:none;
      background:radial-gradient(125% 120% at 50% 10%, rgba(0,0,0,.15) 35%, rgba(0,0,0,.65) 75%, rgba(0,0,0,.92) 100%);
      z-index:0;
    }

    .wrap{
      width:min(980px, 100%);
      position:relative;
      z-index:1;
      display:flex;
      flex-direction:column;
      gap:18px;
      align-items:center;
      margin-top:32px;
    }

    .hero{
      width:100%;
      display:flex;
      gap:18px;
      align-items:center;
      justify-content:space-between;
      padding:16px 18px;
      border:1px solid var(--card-border);
      background:linear-gradient(180deg, rgba(0,30,12,.55), rgba(0,12,5,.45));
      border-radius:18px;
      box-shadow:0 0 0 1px rgba(0,255,102,.06), 0 18px 45px rgba(0,0,0,.55);
      backdrop-filter: blur(6px);
      position: relative;
    }

    .brand{
      /* display:flex;
      gap:14px;
      align-items:center; */
      min-width:0;
    }

    .brand img{
      width:75px;
      height:94px;
      object-fit:contain;
      border-radius:14px;
      border:1px solid rgba(0,255,102,.18);
      background:rgba(0,0,0,.35);
      padding:8px;
      box-shadow:0 0 24px var(--shadow);
      /* flex:0 0 auto; */
      float:left;
      margin-right:14px;
      margin-bottom:14px;
    }

    .mobile-logo{
      display:none;
      width:50%;
      margin:0 auto 18px;
      object-fit:contain;
      border-radius:14px;
      border:1px solid rgba(0,255,102,.18);
      background:rgba(0,0,0,.35);
      padding:8px;
      box-shadow:0 0 24px var(--shadow);
    }

    @media (min-width: 769px){
      .brand{
        display:flex;
        gap:14px;
        align-items:flex-start;
      }

      .brand img{
        width:150px;
        height:188px;
        flex:0 0 auto;
        float:none;
        margin:0;
      }

      .lang-selector{
        position:absolute;
      }
    }

    .brand h1{
      margin:0;
      font-size:clamp(1.15rem, 2.5vw, 1.6rem);
      letter-spacing:.02em;
      color: #57ff9a;
      text-shadow:0 0 14px rgba(0,255,102,.10);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .brand p{
      margin:4px 0 0;
      color:rgba(125,255,180,.75);
      font-weight:600;
      font-size:.95rem;
      word-break: break-word;
    }

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

    .social-icons a{
      display:block;
      width:32px;
      height:32px;
      border-radius:8px;
      border:1px solid rgba(0,255,102,.18);
      background:rgba(0,0,0,.35);
      display:grid;
      place-items:center;
      box-shadow:0 0 22px rgba(0,255,102,.06);
      transition: transform .18s ease;
    }

    .social-icons a:hover{
      transform: scale(1.1);
    }

    .social-icons svg{
      width:18px;
      height:18px;
      fill: currentColor;
      color:#7dffb4;
      opacity:.95;
    }

    .lang-selector{
      position:fixed;
      top: 10px;
      right: 10px;
      color: #7dffb4;
      font-size: 1rem;
      font-weight: 600;
    }

    .lang-selector button{
      background: none;
      border: none;
      color: #7dffb4;
      cursor: pointer;
      font-size: 1rem;
      font-weight: 600;
      padding: 0;
      margin: 0 2px;
      transition: color 0.2s;
    }

    .lang-selector button:hover{
      color: #57ff9a;
    }

    .lang-selector button:hover{
      color: #57ff9a;
    }

    .grid{
      width:100%;
      display:grid;
      grid-template-columns: repeat(5, minmax(0,1fr));
      gap:30px;
    }

    @media (max-width: 768px){
      .hero{ flex-direction:column; align-items:flex-start; }
      .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
      .mobile-logo{ display:block; }
      .brand img{ display:none; }
      .brand h1{ white-space:normal; }
      .wrap > * { display: none; }
      .mobile-message { display: block; }
    }

    .card{
      border:1px solid var(--card-border);
      border-radius:18px;
      background:linear-gradient(180deg, rgba(0,18,7,.55), rgba(0,8,4,.45));
      box-shadow:0 0 0 1px rgba(0,255,102,.05), 0 16px 42px rgba(0,0,0,.55);
      backdrop-filter: blur(6px);
      overflow:hidden;
      aspect-ratio: 1;
    }

    .link{
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      gap:8px;
      padding:16px 16px;
      text-decoration:none;
      color:rgba(180,255,215,.92);
      position:relative;
      height:100%;
      outline:none;
    }

    .link::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(120% 120% at 20% 10%, rgba(0,255,102,.10), transparent 55%),
        radial-gradient(120% 120% at 80% 90%, rgba(0,255,102,.07), transparent 55%);
      opacity:.0;
      transition: opacity .18s ease;
    }

    .link:hover::before,
    .link:focus-visible::before{
      opacity:1;
    }

    .icon{
      width:100%;
      height:100%;
      border-radius:20%;
      border:1px solid rgba(0,255,102,.18);
      background:rgba(0,0,0,.35);
      display:grid;
      place-items:center;
      box-shadow:0 0 22px rgba(0,255,102,.06);
    }

    .icon svg{
      width:80%;
      height:80%;
      fill: currentColor;
      color:#7dffb4;
      opacity:.95;
    }

    .label{
      display:flex;
      flex-direction:column;
      min-width:0;
      gap:2px;
    }

    .label strong{
      font-size:0.7rem;
      color:#57ff9a;
      letter-spacing:.01em;
      text-shadow:0 0 12px rgba(0,255,102,.08);
    }

    .arrow{
      margin-left:auto;
      opacity:.7;
      transform: translateX(0);
      transition: transform .18s ease, opacity .18s ease;
      color:rgba(125,255,180,.65);
    }

    .link:hover .arrow,
    .link:focus-visible .arrow{
      transform: translateX(3px);
      opacity:1;
    }

    .note{
      width:100%;
      border:1px solid var(--card-border);
      border-radius:18px;
      background:linear-gradient(180deg, rgba(0,12,5,.55), rgba(0,6,3,.45));
      box-shadow:0 0 0 1px rgba(0,255,102,.04), 0 16px 42px rgba(0,0,0,.55);
      backdrop-filter: blur(6px);
      padding:18px 18px 16px;
    }

    .note h2{
      margin:0 0 10px 0;
      color:#57ff9a;
      font-size:1.05rem;
      letter-spacing:.02em;
    }

    .note p{
      margin:0;
      color:rgba(180,255,215,.90);
      font-weight:600;
    }

    .note .sep{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(0,255,102,.22), transparent);
      margin:14px 0 12px;
      opacity:.9;
    }

    .small{
      color:rgba(125,255,180,.68);
      font-size:.88rem;
      font-weight:600;
    }

    .ctf-banner {
      width: 100%;
      border: 1px solid var(--card-border);
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(0,18,7,.55), rgba(0,8,4,.45));
      box-shadow: 0 0 0 1px rgba(0,255,102,.05), 0 16px 42px rgba(0,0,0,.55);
      padding: 24px;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: center;
    }

    .ctf-banner h2 {
      margin: 0;
      color: #57ff9a;
      font-size: 1.3rem;
      letter-spacing: .02em;
      text-shadow: 0 0 14px rgba(0,255,102,.10);
    }

    .ctf-banner p {
      margin: 0;
      color: rgba(180,255,215,.90);
      font-weight: 600;
      max-width: 600px;
    }

    .ctf-link {
      display: inline-block;
      margin-top: 12px;
      padding: 10px 24px;
      border: 1px solid rgba(0,255,102,.18);
      border-radius: 8px;
      background: rgba(0,255,102,.1);
      color: #57ff9a;
      text-decoration: none;
      font-weight: 600;
      transition: all 0.2s ease;
    }

    .ctf-link:hover {
      background: rgba(0,255,102,.2);
      box-shadow: 0 0 14px rgba(0,255,102,.15);
      transform: translateY(-2px);
    }

    /* Subtle scanline effect, above everything */
    .scanlines{
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:2;
      opacity:.12;
      background:
        repeating-linear-gradient(
          to bottom,
          rgba(0,255,102,.08),
          rgba(0,255,102,.08) 1px,
          rgba(0,0,0,0) 3px,
          rgba(0,0,0,0) 6px
        );
      mix-blend-mode: screen;
    }

    .mobile-message {
      display: none;
      text-align: center;
      font-size: 1.2rem;
      color: #57ff9a;
      margin: 20px;
    }

    .rules h2 {
      color: #57ff9a;
      margin-bottom: 10px;
    }

    .rules ul {
      list-style: none;
      padding: 0;
    }

    .rules li {
      margin-bottom: 10px;
      color: rgba(180,255,215,.90);
    }

    .rules li::before {
      content: "~$ ";
      color: #57ff9a;
    }

    .rules {
      width: 100%;
      border: 1px solid var(--card-border);
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(0,18,7,.55), rgba(0,8,4,.45));
      box-shadow: 0 0 0 1px rgba(0,255,102,.05), 0 16px 42px rgba(0,0,0,.55);
      padding: 18px;
    }

    .rules-and-scoreboard {
      display: flex;
      gap: 18px;
      width: 100%;
    }

    .rules-and-scoreboard > div {
      flex: 1;
      border: 1px solid var(--card-border);
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(0,18,7,.55), rgba(0,8,4,.45));
      box-shadow: 0 0 0 1px rgba(0,255,102,.05), 0 16px 42px rgba(0,0,0,.55);
      padding: 18px;
    }

    .scoreboard-and-form {
      display: flex;
      gap: 18px;
      width: 100%;
    }

    .scoreboard-and-form > div {
      flex: 1;
      border: 1px solid var(--card-border);
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(0,18,7,.55), rgba(0,8,4,.45));
      box-shadow: 0 0 0 1px rgba(0,255,102,.05), 0 16px 42px rgba(0,0,0,.55);
      padding: 18px;
    }

    .scoreboard h2 {
      color: #57ff9a;
      margin-bottom: 10px;
    }

    .scoreboard #scoreboard {
      color: rgba(180,255,215,.90);
      font-family: inherit;
      margin: 0;
    }

    .scoreboard #scoreboard > div {
      margin-bottom: 4px;
    }

    .scoreboard #scoreboard > div:last-child {
      margin-bottom: 0;
      width: 100%;
      max-width: 600px;
      border: 1px solid var(--card-border);
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(0,18,7,.55), rgba(0,8,4,.45));
      box-shadow: 0 0 0 1px rgba(0,255,102,.05), 0 16px 42px rgba(0,0,0,.55);
      backdrop-filter: blur(6px);
      padding: 18px;
      margin-top: 18px;
    }

    #ctfForm label {
      display: block;
      margin-bottom: 10px;
      color: rgba(180,255,215,.90);
    }

    #ctfForm input {
      width: 100%;
      padding: 8px;
      border: 1px solid rgba(0,255,102,.18);
      border-radius: 8px;
      background: rgba(0,0,0,.35);
      color: var(--fg);
      font-family: inherit;
      font-size: 14px;
      margin-bottom: 8px;
    }

    #ctfForm button {
      width: auto;
      padding: 8px 20px;
      border: 1px solid rgba(0,255,102,.18);
      border-radius: 8px;
      background: rgba(0,0,0,.35);
      color: var(--fg);
      font-family: inherit;
      font-size: 16px;
      cursor: pointer;
      transition: background 0.2s;
      display: block;
      margin: 0 auto;
    }

    #ctfForm button:hover {
      background: rgba(0,255,102,.1);
    }

    #status {
      color: #57ff9a;
    }

    details {
      color: rgba(180,255,215,.90);
    }

    pre {
      background: rgba(0,0,0,.35);
      padding: 10px;
      border-radius: 8px;
      overflow-x: auto;
    }