/* Hub style: blends pixel arcade + rounded glass from games */
:root{
  /* Shared blues from the games */
  --bg-deep:#0b2f73; /* CC/Clarity header base */
  --bg:#0f4bb3;      /* Clarity main */
  --bg2:#0c3f59;     /* PRR depth */
  /* Panels and accents */
  --panel:#1d5fa8;         /* Citation panel */
  --panel-dark:#0d3d6b;
  --panel-soft:#0b6b94;    /* PRR panel */
  --accent:#ffc23c;        /* gold across projects */
  --accent-2:#71d79f;      /* mint */
  --accent-3:#ff6b5f;      /* coral */
  --text:#0e2450;          /* dark text on light cards */
  --white:#f8fbff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--white);
  background:
    radial-gradient(1200px 800px at 75% 10%, #1e64ff22, transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-deep));
}

.pixel{ font-family:'Press Start 2P', monospace; letter-spacing:0.5px; }
.soft{ font-weight:900; }

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

/* Header */
.site-header{ position:relative; background:linear-gradient(180deg, var(--bg-deep), var(--bg)); border-bottom:4px solid #07224f; }
.brand{ margin:0; font-weight:900; letter-spacing:.5px; text-align:center; font-size:28px; }
.tag{ margin:.4rem auto 0; text-align:center; opacity:.85; max-width:62ch; }

/* Grid */
.site-main{ padding:10px 0 28px; }
.grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat( auto-fit, minmax(260px, 1fr) ); gap:16px; }
.cell{ display:flex; }

/* Cards */
.game-card{
  position:relative; isolation:isolate; display:flex; flex-direction:column; gap:10px; text-decoration:none; color:var(--text);
  background:var(--white);
  border:4px solid #e7d9c7; border-radius:20px; padding:18px 18px 16px;
  box-shadow:0 10px 0 #c4b29a, 0 18px 28px rgba(0,0,0,.15);
  transition: transform .15s cubic-bezier(.25,1.4,.35,1), box-shadow .2s;
}
.game-card:hover{ transform:translateY(-4px); box-shadow:0 14px 0 #bda98f, 0 26px 36px rgba(0,0,0,.2); }
.game-card:focus{ outline:4px solid var(--accent); outline-offset:4px; }
.game-card:active{ transform:translateY(-1px); }

.title{ margin:2px 0 0; font-weight:900; font-size:22px; color:#083a52; }
.desc{ margin:4px 0 2px; line-height:1.35; font-weight:800; color:#26314e; }
.meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.pill{ background:#e9f1ff; color:#10325a; border:3px solid #c7ddff; border-radius:999px; padding:6px 10px; font-weight:900; font-size:12px; }

/* Badges echoing each game */
.badge{ position:absolute; right:12px; top:12px; z-index:1; background:var(--accent); color:#522f00; font-weight:900; font-size:12px; padding:6px 12px; border-radius:40px; box-shadow:0 6px 0 #9a6b00; border:3px solid #ffe497; }
.badge.alt{ background:var(--accent-2); color:#063c2b; border-color:#b8f5d5; box-shadow:0 6px 0 #3d8f69; }
.badge.tri{ background:var(--accent-3); color:#3a0b06; border-color:#ffc6c1; box-shadow:0 6px 0 #a74b42; }

/* Footer */
.site-footer{ text-align:center; color:#d6e2ff; padding:10px 0 26px; }
.hint{ opacity:.85; font-weight:800; }

/* Skip link for accessibility */
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ position:absolute; left:16px; top:10px; width:auto; height:auto; padding:8px 12px; background:#fff; color:#000; border-radius:8px; border:2px solid #000; z-index:100; }

/* Small screens */
@media (max-width:560px){ .brand{ font-size:22px } .title{ font-size:20px } }