:root{
      --bg0: #07070b;
      --bg1: #0b0b10;
      --card: rgba(14,14,20,0.62);
      --card2: rgba(12,12,18,0.78);
      --stroke: rgba(255,255,255,0.10);
      --stroke2: rgba(255,255,255,0.16);
      --text: rgba(255,255,255,0.92);
      --muted: rgba(255,255,255,0.70);
      --muted2: rgba(255,255,255,0.58);
      --pink: #fe67a9;
      --pink2: #ff4ea0;
      --blue: #2ea8ff;
      --shadow: 0 18px 55px rgba(0,0,0,0.55);
      --shadow2: 0 10px 26px rgba(0,0,0,0.45);
      --r: 18px;
      --r2: 14px;
      --max: 1040px;
		}

    html, body{ height:100%; }
    body{
      margin:0;
      color: var(--text);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background: radial-gradient(1400px 900px at 10% 10%, rgba(254,103,169,0.08), transparent 55%),
                  radial-gradient(1200px 800px at 90% 20%, rgba(46,168,255,0.08), transparent 55%),
                  linear-gradient(180deg, var(--bg0), var(--bg1));
      overflow-x: hidden;
    }

    .scrollax{
      position: fixed;
      inset: 0;
      z-index: -5;
      pointer-events:none;
      overflow:hidden;
      background: #000;
    }

.layer{
  position:absolute;
  inset: 0;
  will-change: transform;
  transform: translate3d(0,0,0);
}

.layer.bg-img{
  background-image: image-set(
    url('/TT/Web/backgrounds/background.avif') type('image/avif'),
    url('/TT/Web/backgrounds/background.webp') type('image/webp'),
    url('/TT/Web/backgrounds/background.png') type('image/png')
  );

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

    .layer.glow{
      inset: -20vh -15vw;
      background:
        radial-gradient(900px 600px at 18% 15%, rgba(254,103,169,0.22), transparent 60%),
        radial-gradient(900px 600px at 82% 30%, rgba(46,168,255,0.18), transparent 62%),
        radial-gradient(600px 450px at 50% 90%, rgba(254,103,169,0.10), transparent 60%);
      mix-blend-mode: screen;
      opacity: 0.75;
    }

    /* Subtle “grain” (CSS-only, no images) */
    .layer.grain{
      inset: 0;
      background:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 2px);
      opacity: 0.04;
      transform: translate3d(0,0,0);
    }


    .scrollax::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, rgba(0,0,0,0.40), rgba(0,0,0,0.80)),
        radial-gradient(900px 540px at 25% 12%, rgba(254,103,169,0.12), transparent 62%),
        radial-gradient(900px 540px at 75% 20%, rgba(46,168,255,0.10), transparent 62%);
      z-index: 10;
    }

.burger{
  display:none;
  width: 44px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.burger:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.08); }
.burger:active{ transform: translateY(0px); }

.burger-lines{
  width: 18px;
  height: 12px;
  position: relative;
}
.burger-lines span{
  position:absolute;
  left:0;
  right:0;
  height:2px;
  border-radius: 999px;
  background: rgba(255,255,255,0.90);
  transition: transform 0.18s ease, top 0.18s ease, opacity 0.18s ease;
}
.burger-lines span:nth-child(1){ top:0; }
.burger-lines span:nth-child(2){ top:5px; }
.burger-lines span:nth-child(3){ top:10px; }

.mobile-nav-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 80;
}

.mobile-nav{
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(320px, 86vw);
  background: rgba(10,10,14,0.78);
  border-left: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateX(105%);
  transition: transform 0.22s ease;
  z-index: 90;
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: -18px 0 55px rgba(0,0,0,0.55);
}

.mobile-nav .mobile-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.35rem 0.25rem 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.mobile-nav .mobile-links{
  display:flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem 0.15rem;
}

.mobile-nav a{
  color: var(--text);
  text-decoration: none;
  padding: 0.7rem 0.75rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  font-weight: 800;
  transition: background 0.15s ease, transform 0.15s ease;
}
.mobile-nav a:hover{
  background: rgba(255,255,255,0.08);
  transform: translateY(-1px);
}

.mobile-close{
  width: 44px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}


body.nav-open .mobile-nav{ transform: translateX(0); }
body.nav-open .mobile-nav-backdrop{
  opacity: 1;
  pointer-events: auto;
}


body.nav-open .burger-lines span:nth-child(1){ top:5px; transform: rotate(45deg); }
body.nav-open .burger-lines span:nth-child(2){ opacity:0; }
body.nav-open .burger-lines span:nth-child(3){ top:5px; transform: rotate(-45deg); }
body.nav-open{ overflow: hidden; }

    .wrap{
      width: min(var(--max), calc(100% - 2.2rem));
      margin: 0 auto;
    }

    .topbar{
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      background: rgba(0,0,0,0.35);
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .topbar-inner{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.85rem 0;
    }

    .brand{
      display:flex;
      align-items:center;
      gap: 0.8rem;
      min-width: 200px;
    }

    .pill{
      display:inline-flex;
      align-items:center;
      gap: 0.5rem;
      padding: 0.35rem 0.65rem;
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 999px;
      background: rgba(0,0,0,0.35);
      color: var(--muted);
      font-size: 0.85rem;
      white-space: nowrap;
    }

    .pill .dot{
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--pink);
      box-shadow: 0 0 18px rgba(254,103,169,0.85);
    }

    .nav{
      display:flex;
      gap: 0.6rem;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .nav a{
      color: var(--muted);
      text-decoration: none;
      font-size: 0.92rem;
      padding: 0.45rem 0.65rem;
      border-radius: 10px;
      border: 1px solid transparent;
      transition: 0.18s ease;
    }
    .nav a:hover{
      color: var(--text);
      background: rgba(255,255,255,0.06);
      border-color: rgba(255,255,255,0.08);
    }

    .cta{
      display:inline-flex;
      align-items:center;
      gap: 0.55rem;
      padding: 0.55rem 0.95rem;
      border-radius: 12px;
      color: #0b0b10;
      font-weight: 800;
      text-decoration:none;
      background: linear-gradient(135deg, var(--pink), var(--pink2));
      box-shadow: 0 14px 34px rgba(254,103,169,0.25);
      border: 1px solid rgba(255,255,255,0.10);
      transition: transform 0.15s ease, filter 0.15s ease;
      white-space: nowrap;
    }
    .cta:hover{ transform: translateY(-1px); filter: brightness(1.03); }
    .cta:active{ transform: translateY(0px); }

    /* --- Hero --- */
    .hero{
      padding: 2.2rem 0 1.2rem;
    }

    .hero-grid{
      display:grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 1.25rem;
      align-items: stretch;
    }

    .glass{
      background: var(--card);
      border: 1px solid var(--stroke);
      border-radius: var(--r);
      box-shadow: var(--shadow);
      overflow: hidden;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .hero-card{
      padding: 1.5rem 1.5rem 1.2rem;
      position: relative;
    }
    .hero-card::before{
      content:"";
      position:absolute;
      inset:-1px;
      background:
        radial-gradient(600px 240px at 20% 0%, rgba(254,103,169,0.18), transparent 60%),
        radial-gradient(600px 240px at 80% 15%, rgba(46,168,255,0.12), transparent 60%);
      pointer-events:none;
      opacity: 0.9;
    }

    .logo{
      width: min(520px, 100%);
      height: auto;
      display:block;
      margin: 0;
      position: relative;
      z-index: 1;
    }

    .hero-h1{
      margin: 0.9rem 0 0.5rem;
      font-size: clamp(1.35rem, 2.2vw, 1.85rem);
      line-height: 1.15;
      position: relative;
      z-index: 1;
    }

    .hero-p{
      margin: 0 0 1rem;
      color: var(--muted);
      font-size: 1.05rem;
      line-height: 1.55;
      position: relative;
      z-index: 1;
    }

    .actions{
      display:flex;
      flex-wrap: wrap;
      gap: 0.65rem;
      align-items:center;
      position: relative;
      z-index: 1;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      gap: 0.55rem;
      padding: 0.62rem 0.95rem;
      border-radius: 12px;
      font-weight: 800;
      text-decoration: none;
      border: 1px solid rgba(255,255,255,0.10);
      transition: transform 0.15s ease, background 0.15s ease, filter 0.15s ease;
      user-select:none;
    }

    .btn-primary{
      color: #0b0b10;
      background: linear-gradient(135deg, var(--pink), var(--pink2));
      box-shadow: 0 16px 40px rgba(254,103,169,0.25);
    }
    .btn-primary:hover{ transform: translateY(-1px); filter: brightness(1.03); }

    .btn-ghost{
      color: var(--text);
      background: rgba(255,255,255,0.06);
    }
    .btn-ghost:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.08); }

    .note{
      color: var(--muted2);
      font-size: 0.92rem;
      display:flex;
      align-items:center;
      gap: 0.45rem;
    }

    .hero-side{
      display:flex;
      flex-direction: column;
      gap: 1rem;
      padding: 1rem;
    }

    .donate{
      padding: 1rem 1.1rem;
      background: var(--card2);
      border: 1px solid var(--stroke);
      border-radius: var(--r2);
      box-shadow: var(--shadow2);
    }

    .donate strong{ color: #fff; }
    .donate p{
      margin: 0.35rem 0 0.85rem;
      color: var(--muted);
      line-height: 1.45;
      font-size: 0.95rem;
    }

    .donate-row{
      display:flex;
      gap: 0.65rem;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
    }

    .donate a{
      text-decoration:none;
      font-weight: 900;
      color: #0b0b10;
      background: linear-gradient(135deg, var(--pink), var(--pink2));
      padding: 0.55rem 0.85rem;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.10);
      box-shadow: 0 14px 34px rgba(254,103,169,0.22);
      transition: transform 0.15s ease, filter 0.15s ease;
      white-space: nowrap;
    }
    .donate a:hover{ transform: translateY(-1px); filter: brightness(1.03); }


.games{
  padding: 1rem 1.1rem;
  background: var(--card2);
  border: 1px solid var(--stroke);
  border-radius: var(--r2);
  box-shadow: var(--shadow2);
}

.games h3{
  margin: 0 0 0.55rem;
  color: #fff;
  font-size: 1.05rem;
  letter-spacing: 0.2px;
}

.games p{
  margin: 0 0 0.9rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.games-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.game-pill{
  display:flex;
  align-items:flex-start;
  gap: 0.6rem;
  padding: 0.65rem 0.7rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.28);
}

.game-ico{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, rgba(254,103,169,0.95), rgba(255,78,160,0.90));
  box-shadow: 0 12px 26px rgba(254,103,169,0.16);
  flex: 0 0 auto;
}

.game-pill strong{
  display:block;
  color: rgba(255,255,255,0.92);
  font-size: 0.92rem;
  margin: 0 0 0.15rem;
}

.game-pill span{
  display:block;
  color: var(--muted2);
  font-size: 0.86rem;
  line-height: 1.35;
}
 
    .section{
      margin: 1.25rem 0;
    }

    .card{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      border-radius: var(--r);
      overflow: hidden;
      background: var(--card);
      border: 1px solid var(--stroke);
      box-shadow: var(--shadow2);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .card .copy{
      padding: 1.45rem 1.5rem;
      position: relative;
    }

    .kicker{
      display:inline-flex;
      align-items:center;
      gap: 0.5rem;
      font-size: 0.85rem;
      color: var(--muted);
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(0,0,0,0.30);
      padding: 0.28rem 0.6rem;
      border-radius: 999px;
      margin-bottom: 0.75rem;
    }
    .kicker .spark{
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--pink);
      box-shadow: 0 0 18px rgba(254,103,169,0.85);
    }

    .card h2{
      margin: 0 0 0.55rem;
      font-size: 1.35rem;
      letter-spacing: 0.2px;
    }

    .card p{
      margin: 0;
      color: var(--muted);
      line-height: 1.55;
      font-size: 1.02rem;
    }

    .media{
      background: rgba(0,0,0,0.55);
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 0;
      position: relative;
    }

    .media::before{
      content:"";
      position:absolute;
      inset:-1px;
      background: radial-gradient(550px 280px at 15% 10%, rgba(254,103,169,0.18), transparent 60%),
                  radial-gradient(550px 280px at 85% 25%, rgba(46,168,255,0.12), transparent 60%);
      pointer-events:none;
      opacity: 0.9;
    }

	video{
	  width: 100%;
	  height: 100%;
	  display: block;
	  object-fit: cover;
	  aspect-ratio: 16/9;
	  border: 0;
	}

	video:fullscreen{
	  object-fit: contain;
	  background: #000;
	  width: 100vw;
	  height: 100vh;
	}



    /* Alternate layout like a “premium landing page” */
    .card.alt{
      grid-template-columns: 1fr 1fr;
    }
    .card.alt .copy{ order: 2; }
    .card.alt .media{ order: 1; }

    /* System requirements special card */
    .sysreq
	{
      grid-template-columns: 1.2fr 0.8fr;
    }

    .sysreq-list
	{
      margin: 0.75rem 0 0;
      padding-left: 1.15rem;
      color: var(--muted);
      line-height: 1.55;
    }
    .sysreq-list li
	{ 
	  margin: 0.35rem 0;
	}
    .sysreq-list a
	{ 
		color: rgba(255,255,255,0.88);
	}
    .sysreq-list a:hover
	{ 
	color: #fff; 
	}

    .check
	{
      padding: 1.2rem;
      height: 100%;
      width: 100%;
      display:flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.75rem;
    }
    .check h3
	{
      margin:0;
      font-size: 1.05rem;
    }
    .check ul
	{
      margin:0;
      padding-left: 1.1rem;
      color: var(--muted);
      line-height: 1.5;
    }
    .check .hint
	{
      color: var(--muted2);
      font-size: 0.95rem;
    }
	

    /* Footer */
    footer{
      margin: 1.8rem 0 2.4rem;
      padding: 1rem 1.2rem;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: var(--r);
      background: rgba(0,0,0,0.35);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .foot{
      display:flex;
      flex-wrap: wrap;
      gap: 0.9rem;
      align-items:center;
      justify-content: space-between;
      color: var(--muted);
      font-size: 0.92rem;
      width: 100%;
    }
    .foot a{ color: rgba(255,255,255,0.88); text-decoration: underline; }
    .foot a:hover{ color: #fff; }

    /* Reveal animation */
    .reveal{
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.45s ease, transform 0.45s ease;
    }
    .reveal.on{
      opacity: 1;
      transform: translateY(0);
    }

    /* Visually hidden h1 for SEO */
    .visually-hidden{
      position:absolute;
      width:1px; height:1px;
      padding:0; margin:-1px;
      overflow:hidden;
      clip: rect(0,0,0,0);
      white-space: nowrap;
      border:0;
    }

    @media (prefers-reduced-motion: reduce){
      .layer{ transform: translate3d(0,0,0) scale(1.05) !important; }
      .reveal{ opacity: 1 !important; transform:none !important; }
    }

@media (max-width: 980px){
		.nav{ display:none !important; }
		.burger{ display:inline-flex !important; margin-left:auto; }
		.topbar .nav{ display:none !important; }
		.topbar .burger{ display:inline-flex !important; }
		.topbar-inner{ align-items:center !important; }
		.hero-grid{ grid-template-columns: 1fr; }
		.card, .sysreq{ grid-template-columns: 1fr; }
		.card.alt .copy{ order: 1; }
		.card.alt .media{ order: 2; }
		.nav{ justify-content:flex-start; }
		.scrollax { position: fixed; inset: 0; }
		.scrollax .layer{inset: 0 !important;transform: none !important;will-change: auto !important;}
		.scrollax .layer.glow,
		.scrollax .layer.grain{ display:none !important; }
		.games-grid{ grid-template-columns: 1fr; }
		.layer.bg-img{
					background-image: image-set(
					  url('/TT/Web/backgrounds/background-980.avif') type('image/avif'),
					  url('/TT/Web/backgrounds/background-980.webp') type('image/webp'),
					  url('/TT/Web/backgrounds/background.png') type('image/png')
					);
				  }
					/* Always stack: text on top, video below */
		.card,
		.card.alt,
		.sysreq{
			grid-template-columns: 1fr !important;
		  }

		  /* Force ordering regardless of .alt desktop swap */
		.card .copy,
		.card.alt .copy{
			order: 1 !important;
		  }

		.card .media,
		.card.alt .media{
			order: 2 !important;
			min-height: 220px; /* stops “squashed” video feel */
		  }

		  /* Make sure the video can’t collapse */
		.media{
			width: 100%;
		  }

		  video{
			width: 100%;
			height: auto;          /* lets it size naturally */
			aspect-ratio: 16/9;    /* keeps your consistent ratio */
			object-fit: cover;
		  }
 }
 
@media (min-width: 981px){
		  .scrollax{
			/* keep fixed, but ensure it always covers */
			inset: 0;
		  }

		  .scrollax .layer{
			/* IMPORTANT: layer bigger than viewport */
			inset: -28vh -12vw;
			transform: translate3d(0,0,0) scale(1.12);
		  }

		  .scrollax .layer.bg-img{
			background-size: cover;
			background-position: center;
		  }
		  
		  .foot {
		  display: flex;
		  flex-direction: column;
		  gap: 0.6rem;
		  font-size: 0.9rem;
		  color: #ccc;
		}

		.foot-req {
		  font-size: 0.85rem;
		  line-height: 1.4;
		  color: #bbb;
		}

		.foot-req a {
		  color: var(--accent, #fe67a9);
		  text-decoration: none;
		}

		.foot-req a:hover {
		  text-decoration: underline;
		}

		.foot-meta {
		  display: flex;
		  justify-content: space-between;
		  gap: 1rem;
		  flex-wrap: wrap;
		}

		.foot-meta a {
		  color: #fff;
		}
}