:root {
   --font-body: 'Montserrat', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
   --font-mono: 'Montserrat', Consolas, 'Liberation Mono', monospace;
   --size-base: 10pt;

   --header-h: 120px;
   --footer-h: 120px;

   --c-bg: #070d1c;
   --c-panel: #101d3b;
   --c-panel-r: #261545;
   --c-text: #e7f3ff;
   --c-dim: #9cb2d9;
   --c-cyan: #42f5ff;
   --c-lime: #8dff6a;
   --c-gold: #ffbe5c;
   --c-blurple: #7289da;
   --c-focus: #ffe775;

   --grad-start: rgba(16, 29, 59, 0.45);
   --grad-end: rgba(13, 23, 48, 0.62);

   --shadow-body: 0 1px 0 rgba(4, 9, 20, 0.7);
   --shadow-glow: 0 0 14px rgba(141, 255, 106, 0.4);

   --ease-slide: transform 1000ms cubic-bezier(0.4, 0, 0.2, 1);
   --ease-fast: 200ms ease;
   --ease-link: color 180ms ease, text-shadow 180ms ease, transform 150ms ease-in-out;
   --ease-card: 300ms ease;
}

/* Reset */

*,
*::before,
*::after {
   box-sizing: border-box;
}

html,
body,
a,
div,
h2,
h3,
p,
label,
section,
article,
span {
   border: 0;
   margin: 0;
   padding: 0;
}

body,
a,
div,
h2,
h3,
p,
label,
section,
article,
span {
   font: inherit;
}

html {
   background-color: var(--c-bg);
   color: var(--c-text);
   font-family: var(--font-body);
   font-size: var(--size-base);
   line-height: 1;
   height: 100%;
}

body {
   background: radial-gradient(ellipse at 50% 30%, rgba(66, 245, 255, 0.03) 0%, transparent 60%), var(--c-bg);
   display: grid;
   grid-template-columns: repeat(8, 1fr);
   grid-template-rows: var(--header-h) 1fr var(--footer-h);
   min-height: 100%;
   position: relative;
   text-shadow: var(--shadow-body);
}

/* Hidden navigation state */

input[name='nav'] {
   clip: rect(0, 0, 0, 0);
   height: 1px;
   overflow: hidden;
   position: absolute;
   width: 1px;
}

/* SVG gradient edges */

.grad-stop {
   stop-color: var(--c-panel);
}
.grad-stop-r {
   stop-color: var(--c-panel-r);
}

body > svg:first-of-type,
body > svg:last-of-type {
   grid-column: 1 / -1;
   height: 100%;
   pointer-events: none;
   position: absolute;
   width: 100%;
}

body > svg:first-of-type {
   grid-row: 1;
}
body > svg:last-of-type {
   grid-row: 3;
}

/* Shared focus ring */

input:focus + .nav-ctrl,
.game-card:focus,
.tool-block:focus,
.foot-link:focus {
   outline: 1px solid rgba(255, 231, 117, 0.35);
   outline-offset: -4px;
}

/* Header (shared) */

.brand,
.nav-ctrl {
   grid-column: span 2;
   height: var(--header-h);
   line-height: var(--header-h);
   overflow: hidden;
   position: relative;
   text-align: center;
   white-space: nowrap;
}

/* Brand */

@keyframes pulse {
   0%,
   100% {
      text-shadow:
         0 1px 0 rgba(4, 9, 20, 0.7),
         0 0 0 transparent;
   }
   50% {
      text-shadow:
         0 1px 0 rgba(4, 9, 20, 0.7),
         0 0 24px rgba(66, 245, 255, 0.15);
   }
}

.brand {
   animation: pulse 4s ease-in-out infinite;
   color: var(--c-cyan);
   font-family: var(--font-mono);
   font-size: 180%;
   font-weight: 700;
   letter-spacing: 0.05em;
}

.brand > i {
   color: var(--c-gold);
}

/* Shared inner span */

.nav-ctrl > span,
.foot-link > span {
   display: block;
   height: inherit;
   line-height: inherit;
   position: relative;
   transition: var(--ease-link);
}

/* Navigation controls */

.nav-ctrl {
   color: var(--c-text);
   cursor: pointer;
   font-size: 150%;
   font-weight: 500;
}

.nav-ctrl[for='nav-home'] > span > i {
   color: rgba(66, 245, 255, 0.4);
   transition: color var(--ease-fast);
}
.nav-ctrl[for='nav-games'] > span > i {
   color: rgba(141, 255, 106, 0.4);
   transition: color var(--ease-fast);
}
.nav-ctrl[for='nav-about'] > span > i {
   color: rgba(255, 190, 92, 0.4);
   transition: color var(--ease-fast);
}

.nav-ctrl > span::after {
   background: var(--c-cyan);
   bottom: 28px;
   content: '';
   height: 2px;
   left: 25%;
   position: absolute;
   right: 25%;
   transform: scaleX(0);
   transition: transform 300ms ease;
}

.nav-ctrl > span::before {
   border: 2px solid var(--c-dim);
   content: '';
   display: inline-block;
   height: 8px;
   margin-right: 8px;
   transform: rotate(45deg);
   transition:
      background-color var(--ease-fast),
      border-color var(--ease-fast),
      box-shadow var(--ease-fast);
   vertical-align: middle;
   width: 8px;
}

/* Nav hover */

.nav-ctrl:hover > span {
   color: var(--c-lime);
   text-shadow: var(--shadow-glow);
   transform: scale(1.15);
}

.nav-ctrl:hover > span::before {
   border-color: var(--c-lime);
}

/* Nav keyboard focus (radio → label via +) */

input:focus + .nav-ctrl > span::before {
   border-color: var(--c-focus);
   box-shadow: 0 0 6px rgba(255, 231, 117, 0.3);
}

/* Nav active (checked via +) */

input:checked + .nav-ctrl > span {
   color: var(--c-cyan);
}

input:checked + .nav-ctrl > span::before {
   background-color: var(--c-cyan);
   border-color: var(--c-cyan);
   box-shadow: 0 0 8px rgba(66, 245, 255, 0.5);
}

input:checked + .nav-ctrl > span::after {
   transform: scaleX(1);
}

/* Content area */

#main-content-area {
   background: linear-gradient(180deg, var(--grad-start) 0%, var(--grad-end) 100%);
   border-bottom: 1px solid rgba(255, 190, 92, 0.08);
   border-top: 1px solid rgba(66, 245, 255, 0.1);
   grid-column: 1 / -1;
   overflow: hidden;
   position: relative;
   z-index: 1;
}

.content-track {
   display: grid;
   min-height: 100%;
}

/* Panels */

.panel {
   display: flex;
   flex-direction: column;
   grid-column: 1;
   grid-row: 1;
   justify-content: center;
   opacity: 0;
   padding: 48px 60px;
   transform: translateX(100%);
   transition:
      var(--ease-slide),
      opacity 300ms ease,
      visibility 0s 300ms;
   visibility: hidden;
}

#nav-home:checked ~ #main-content-area .panel:nth-child(1),
#nav-games:checked ~ #main-content-area .panel:nth-child(2),
#nav-about:checked ~ #main-content-area .panel:nth-child(3) {
   opacity: 1;
   transform: translateX(0);
   transition:
      var(--ease-slide),
      opacity 300ms ease,
      visibility 0s 0s;
   visibility: visible;
}

#nav-games:checked ~ #main-content-area .panel:nth-child(1),
#nav-about:checked ~ #main-content-area .panel:nth-child(1),
#nav-about:checked ~ #main-content-area .panel:nth-child(2) {
   transform: translateX(-100%);
}

/* Panel typography */

.panel h2 {
   color: var(--c-cyan);
   font-size: 200%;
   font-weight: 700;
   letter-spacing: 0.02em;
   line-height: 1.3;
   margin-bottom: 24px;
}

.panel p {
   color: var(--c-dim);
   font-size: 115%;
   line-height: 1.6;
   margin-bottom: 14px;
   max-width: 640px;
}

.panel p strong {
   color: var(--c-text);
   font-weight: 600;
}

.panel .aside {
   font-style: italic;
   margin-top: 20px;
   opacity: 0.5;
}

.panel .aside a {
   border-bottom: 1px solid var(--c-blurple);
   color: var(--c-text);
   text-decoration: none;
   transition: color var(--ease-fast);
}

.panel .aside a:hover {
   color: var(--c-lime);
}

/* Game cards */

.card-spread {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   padding: 10px 0;
}

.game-card {
   background: rgba(10, 19, 42, 0.92);
   border: 1px solid rgba(66, 245, 255, 0.16);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
   display: block;
   margin: 14px 10px;
   padding: 26px 22px 22px;
   position: relative;
   text-decoration: none;
   transition:
      transform var(--ease-card),
      box-shadow var(--ease-card),
      border-color var(--ease-card);
   width: 230px;
}

.card-1 {
   transform: rotate(-2.5deg);
   z-index: 1;
}
.card-2 {
   transform: rotate(1.8deg) translateY(12px);
   z-index: 2;
}
.card-3 {
   transform: rotate(-1.2deg) translateY(-6px);
   z-index: 3;
}
.card-4 {
   transform: rotate(2.2deg) translateY(8px);
   z-index: 4;
}

.game-card:hover {
   border-color: rgba(66, 245, 255, 0.4);
   box-shadow:
      0 14px 36px rgba(0, 0, 0, 0.6),
      0 0 1px rgba(66, 245, 255, 0.25),
      inset 0 1px 0 rgba(66, 245, 255, 0.15);
   transform: rotate(0) translateY(-10px) scale(1.06);
   z-index: 10;
}

/* Invisible hit area: while hovered, extend below the lifted card so a
   cursor resting near its bottom edge does not lose hover and loop */

.game-card::after {
   bottom: 0;
   content: '';
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
}
.game-card:hover::after {
   bottom: -24px;
}

/* Shared card/tool headings */

.game-card h3,
.tool-block h3 {
   color: var(--c-text);
   font-family: var(--font-mono);
   font-size: 160%;
   font-weight: 700;
   letter-spacing: 0.08em;
   margin-bottom: 10px;
}

.game-card p {
   color: var(--c-dim);
   line-height: 1.5;
   margin-bottom: 0;
}

.card-badge {
   display: block;
   font-size: 75%;
   font-weight: 600;
   letter-spacing: 0.1em;
   margin-bottom: 8px;
   text-transform: uppercase;
}

.card-badge.active {
   color: var(--c-lime);
}
.card-badge.planned {
   color: var(--c-gold);
}
.card-badge.tbd {
   color: var(--c-dim);
   opacity: 0.45;
}

/* Tool block (Workshop) */

.tool-block {
   background: rgba(8, 14, 30, 0.8);
   border: 1px solid rgba(66, 245, 255, 0.1);
   border-left: 3px solid var(--c-cyan);
   display: block;
   margin-top: 28px;
   max-width: 540px;
   padding: 26px 28px;
   text-decoration: none;
   transition:
      border-color var(--ease-fast),
      box-shadow var(--ease-fast);
}

.tool-block:hover {
   border-color: rgba(66, 245, 255, 0.35);
   box-shadow:
      0 4px 20px rgba(0, 0, 0, 0.4),
      0 0 1px rgba(66, 245, 255, 0.2);
}

.tool-block h3 {
   letter-spacing: 0.06em;
}

.tool-block .tagline {
   color: var(--c-cyan);
   font-style: italic;
   font-weight: 500;
}

.tool-url {
   color: var(--c-dim);
   display: inline-block;
   font-family: var(--font-mono);
   font-size: 95%;
   margin-top: 6px;
   transition:
      color var(--ease-fast),
      text-shadow var(--ease-fast);
}

.tool-url::before {
   content: '\2192\00a0';
}

.tool-block:hover .tool-url {
   color: var(--c-lime);
   text-shadow: var(--shadow-glow);
}

/* Footer */

.foot-link {
   color: var(--c-dim);
   font-size: 110%;
   font-weight: 400;
   grid-row: 3;
   height: var(--footer-h);
   line-height: var(--footer-h);
   overflow: hidden;
   position: relative;
   text-decoration: none;
   white-space: nowrap;
}

.foot-link > span {
   text-align: center;
}

.foot-link:nth-of-type(1) > span > i {
   color: var(--c-blurple);
}
.foot-link:nth-of-type(2) > span > i {
   color: rgba(66, 245, 255, 0.4);
}
.foot-link:nth-of-type(3) > span > i {
   color: rgba(255, 190, 92, 0.4);
}

.foot-link:nth-of-type(1) {
   grid-column: 5;
}
.foot-link:nth-of-type(2) {
   grid-column: 6;
}
.foot-link:nth-of-type(3) {
   grid-column: 7;
}
.foot-link:nth-of-type(4) {
   grid-column: 8;
}

.foot-link > span::after {
   background: var(--c-lime);
   bottom: 28px;
   content: '';
   height: 1px;
   left: 20%;
   position: absolute;
   right: 20%;
   transform: scaleX(0);
   transition: transform 200ms ease;
}

.foot-link:hover > span,
.foot-link:focus > span {
   color: var(--c-lime);
   text-shadow: var(--shadow-glow);
   transform: scale(1.2);
}

.foot-link:hover > span::after,
.foot-link:focus > span::after {
   transform: scaleX(1);
}

.foot-top {
   color: var(--c-gold);
}

/* Discord call to action (footer) */

@keyframes beacon {
   0%,
   100% {
      text-shadow: 0 0 0 transparent;
   }
   50% {
      text-shadow: 0 0 12px rgba(114, 137, 218, 0.8);
   }
}

.foot-cta {
   color: var(--c-text);
}

.foot-cta > span > i {
   animation: beacon 4s ease-in-out infinite;
   margin-right: 4px;
}

/* Narrow desktop: footer labels get two columns each */

@media (min-width: 601px) and (max-width: 900px) {
   .foot-link:nth-of-type(1) {
      grid-column: 2 / span 2;
   }
   .foot-link:nth-of-type(2) {
      grid-column: 4 / span 2;
   }
   .foot-link:nth-of-type(3) {
      grid-column: 6 / span 2;
   }
}

/* Mobile */

@media (max-width: 600px) {
   :root {
      --font-mono: 'Montserrat', sans-serif;
   }

   body {
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: auto auto 1fr auto auto;
   }

   .content-track {
      min-height: 0;
      position: relative;
   }

   body > svg:first-of-type {
      grid-row: 1 / 3;
   }
   body > svg:last-of-type {
      grid-row: 4 / 6;
   }

   .brand {
      grid-column: 1 / -1;
      grid-row: 1;
      font-size: 150%;
      height: 56px;
      line-height: 56px;
   }

   .nav-ctrl {
      grid-column: span 1;
      grid-row: 2;
      font-size: 110%;
      height: 48px;
      line-height: 48px;
   }

   .nav-ctrl > span > i {
      display: none;
   }
   .nav-ctrl > span::after {
      bottom: 8px;
   }
   .nav-ctrl:hover > span {
      transform: none;
   }

   .panel {
      justify-content: start;
      padding: 28px 20px;
      position: absolute;
      top: 0;
      width: 100%;
   }

   #nav-home:checked ~ #main-content-area .panel:nth-child(1),
   #nav-games:checked ~ #main-content-area .panel:nth-child(2),
   #nav-about:checked ~ #main-content-area .panel:nth-child(3) {
      position: relative;
   }
   .panel h2 {
      font-size: 160%;
      margin-bottom: 18px;
   }
   .panel p {
      font-size: 105%;
   }

   .game-card {
      width: 100%;
      margin: 10px 0;
   }
   .card-1,
   .card-2,
   .card-3,
   .card-4 {
      transform: none;
   }
   .game-card:hover {
      transform: translateY(-4px) scale(1.02);
   }

   .tool-block {
      max-width: none;
   }

   .foot-link {
      font-size: 95%;
      height: 50px;
      line-height: 50px;
   }
   .foot-link > span::after {
      bottom: 10px;
   }
   .foot-link:nth-of-type(1) {
      grid-column: 1;
      grid-row: 4;
   }
   .foot-link:nth-of-type(2) {
      grid-column: 2;
      grid-row: 4;
   }
   .foot-link:nth-of-type(3) {
      grid-column: 3;
      grid-row: 4;
   }
   .foot-link:nth-of-type(4) {
      grid-column: 1 / -1;
      grid-row: 5;
   }
   .foot-link:hover > span {
      transform: scale(1.1);
   }
}