/* Brand: brand/README.md. Fonts are served from this site (OFL licences beside them). */
@font-face { font-family: "Montserrat"; font-weight: 500; font-display: swap; src: url("/assets/fonts/montserrat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url("/assets/fonts/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 800; font-display: swap; src: url("/assets/fonts/montserrat-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 400; font-display: swap; src: url("/assets/fonts/space-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-display: swap; src: url("/assets/fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-display: swap; src: url("/assets/fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); }
/* Noto Sans JP: only the two pieces that hold 繋 and ぐ, for the capsule. */
@font-face {
  font-family: "Noto Sans JP";
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-jp-91-700-normal.woff2") format("woff2");
  unicode-range: U+60,U+2200,U+226b,U+2461,U+517c,U+526f,U+5800,U+5b97,U+5bf8,U+5c01,U+5d29,U+5e4c,U+5e81,U+6065,U+61d0,U+667a,U+6696,U+6843,U+6c99,U+6d99,U+6ec5,U+6f22,U+6f6e,U+6fa4,U+6fef,U+71c3,U+72d9,U+7384,U+78e8,U+7a1a,U+7a32,U+7a3c,U+7adc,U+7ca7,U+7d2b,U+7dad,U+7e4b,U+80a9,U+8170,U+81ed,U+820e,U+8a17,U+8afe,U+90aa,U+914e,U+963f,U+99c4,U+9eba,U+9f3b,U+ff38;
}
@font-face {
  font-family: "Noto Sans JP";
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-jp-119-700-normal.woff2") format("woff2");
  unicode-range: U+20,U+2027,U+3001-3002,U+3041-307f,U+3081-308f,U+3091-3093,U+3099-309a,U+309d-309e,U+30a1-30e1,U+30e3-30ed,U+30ef-30f0,U+30f2-30f4,U+30fb-30fe,U+ff0c,U+ff0e;
}


:root {
  --tb-deep-void: #08090f;
  --tb-void: #0b0d14;
  --tb-surface: #121521;
  --tb-card: #161b2e;
  --tb-electric-cyan: #00f0ff;
  --tb-cyber-azure: #3b82f6;
  --tb-neon-violet: #8b5cf6;
  --tb-laser-magenta: #ec4899;
  --tb-grad-tsunagu: linear-gradient(90deg, #93faff 0%, #00f0ff 45%, #3b82f6 100%);
  --tb-grad-bit: linear-gradient(90deg, #a855f7 0%, #ec4899 60%, #00f0ff 100%);
  --tb-glow-cyan: 0 0 20px rgba(0, 240, 255, 0.55);

  --line: #232a40;
  --text: #e8edf7;
  --muted: #9aa5bf;
  --link: #6ff6ff;
  --display: "Montserrat", system-ui, sans-serif;
  --body: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --radius: 16px;
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at 50% -10%, var(--tb-surface), var(--tb-void) 60%, var(--tb-deep-void)) fixed;
  color: var(--text);
  font: 17px/1.65 var(--body);
}

main { flex: 1; padding-block: 48px 72px; }

.wrap { width: min(1080px, 100% - 32px); margin-inline: auto; }

a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--tb-laser-magenta); }

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.2; }
h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 16px; }
h2 { font-size: 1.5rem; margin: 48px 0 12px; }
h3 { font-size: 1.15rem; margin: 28px 0 8px; }

/* The wordmark: brand/README.md, "The wordmark in CSS". */
.tsunagubit-title {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tsunagubit-title .tsunagu,
.tsunagubit-title .bit {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tsunagubit-title .tsunagu { background-image: var(--tb-grad-tsunagu); }
.tsunagubit-title .bit { background-image: var(--tb-grad-bit); position: relative; }
/* The glowing pixel bit above the I of BIT. */
.tsunagubit-title .bit::after {
  content: "";
  position: absolute;
  width: 0.16em;
  height: 0.16em;
  left: 0.86em;
  top: -0.2em;
  border-radius: 0.03em;
  background: #fff;
  box-shadow: 0 0 0.12em 0.04em var(--tb-electric-cyan), 0 0 0.4em var(--tb-electric-cyan);
}

.capsule {
  font-family: var(--jp);
  font-weight: 700;
  color: var(--tb-electric-cyan);
  border: 2px solid transparent;
  border-radius: 999px;
  background: linear-gradient(var(--tb-void), var(--tb-void)) padding-box, linear-gradient(90deg, var(--tb-electric-cyan), var(--tb-cyber-azure), var(--tb-neon-violet), var(--tb-laser-magenta)) border-box;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.3), 0 0 18px rgba(236, 72, 153, 0.2);
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
  padding: 0.05em 0.7em;
  line-height: 1.5;
  white-space: nowrap;
}

/* Header */
.site-header { border-bottom: 1px solid var(--line); background: rgba(11, 13, 20, 0.85); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.site-nav { display: flex; gap: 20px; font-family: var(--display); font-weight: 500; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); }

.wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.wordmark__mark { width: 44px; height: 44px; }
.wordmark .tsunagubit-title { font-size: 1.2rem; }
.wordmark .capsule { font-size: 0.75rem; }

/* Home */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding-block: 8px 32px; }
.hero__mark { width: clamp(180px, 26vw, 280px); height: auto; }
.hero .tsunagubit-title { font-size: clamp(2.2rem, 7vw, 4.4rem); margin: 0; }
.hero .capsule { font-size: clamp(1rem, 2.4vw, 1.4rem); margin-top: 8px; }

.card {
  background: var(--tb-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.card__body { padding: 24px 28px 28px; }
.card__body h2 { margin-top: 0; }
.card img { display: block; width: 100%; height: auto; }

.button {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--tb-deep-void);
  background: var(--tb-grad-tsunagu);
  box-shadow: var(--tb-glow-cyan);
}
.button:hover { color: var(--tb-deep-void); filter: brightness(1.1); }
.button--quiet { background: transparent; color: var(--link); border: 1px solid var(--line); box-shadow: none; }
.button--quiet:hover { color: var(--text); border-color: var(--tb-neon-violet); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

.tags { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tags li {
  font-family: var(--display);
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--tb-card);
}
.tags li:first-child { border-color: var(--tb-electric-cyan); box-shadow: var(--tb-glow-cyan); }

.badge {
  display: inline-block;
  vertical-align: middle;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  color: var(--tb-deep-void);
  background: var(--tb-grad-bit);
}

/* Game page */
.banner { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); display: block; }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 16px; }
.shots img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); display: block; }
.facts { color: var(--muted); }

/* Text pages */
.prose { max-width: 70ch; }
.prose li { margin-bottom: 6px; }
.updated { color: var(--muted); font-size: 0.95rem; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 0.95rem; }
.site-footer__inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 20px; }
.site-footer nav { display: flex; gap: 20px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--text); }

@media (max-width: 640px) {
  .wordmark .capsule { display: none; }
  .wordmark__mark { width: 34px; height: 34px; }
  .wordmark .tsunagubit-title { font-size: 0.95rem; }
  .site-nav { gap: 14px; font-size: 0.95rem; }
  .site-footer__inner { flex-direction: column; }
}