/* 8by8verse — small custom CSS layer
   Tailwind via CDN handles the bulk; this file is for things Tailwind can't do.
   ──────────────────────────────────────────────────────────────────────────
   Brand visual language: faint chess motifs everywhere.
   The board pattern + chess-piece silhouettes appear at low opacity behind
   real content, the way a watermark sits under a letterhead — present, never
   competing. */

@keyframes float-slow {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -8px, 0); }
}
.animate-float-slow { animation: float-slow 8s ease-in-out infinite; }

@keyframes float-slower {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
  50%      { transform: translate3d(0, -10px, 0) rotate(2deg); }
}
.animate-float-slower { animation: float-slower 14s ease-in-out infinite; }

@keyframes spin-slow { to { transform: rotate(360deg); } }
.animate-spin-slow { animation: spin-slow 24s linear infinite; }

/* Chess board accent — the original light-saffron diagonal grid.
   Kept for back-compat with sections that already use .chess-grid. */
.chess-grid {
  background-image:
    linear-gradient(45deg, rgba(255,122,20,.05) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,122,20,.05) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,122,20,.05) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,122,20,.05) 75%);
  background-size: 32px 32px;
  background-position: 0 0, 0 16px, 16px -16px, -16px 0;
}

/* Faint 8×8 chessboard texture — the marquee 8by8verse motif.
   Use as an absolute-positioned <div class="board-tex"></div> behind hero content.
   The SVG is monochrome (currentColor); we drive colour from the host. */
.board-tex {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url('../img/board-pattern.svg');
  background-size: 96px 96px;
  background-repeat: repeat;
  color: rgba(31, 34, 48, .06);     /* default — dark ink on light bg */
  opacity: 1;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}
.board-tex.saffron { color: rgba(255, 122, 20, .07); }
.board-tex.cosmic  { color: rgba(67, 56, 202, .08); }
.board-tex.on-dark { color: rgba(255, 255, 255, .04); }
.board-tex.dense   { background-size: 64px 64px; }
.board-tex.coarse  { background-size: 160px 160px; }

/* Chess-piece silhouette decoration — drop these as positioned children of
   a relative parent. The "currentColor" is set via Tailwind text-* utilities
   so a single SVG can be coloured saffron, cosmic, ink, or white at very low
   opacity for that watermark feel. */
.piece-deco {
  position: absolute; pointer-events: none; user-select: none;
  opacity: .06;
}
.piece-deco svg { width: 100%; height: 100%; display: block; }
.piece-deco.softer  { opacity: .04; }
.piece-deco.firmer  { opacity: .09; }
.piece-deco.on-dark { opacity: .07; }

/* Convenience sizing classes for the silhouettes — keeps the markup tidy. */
.piece-deco.size-sm { width: 96px;  height: 96px;  }
.piece-deco.size-md { width: 160px; height: 160px; }
.piece-deco.size-lg { width: 260px; height: 260px; }
.piece-deco.size-xl { width: 420px; height: 420px; }

/* Cleaner table look that complements Tailwind utilities */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { padding: .65rem .9rem; border-bottom: 1px solid rgb(229 231 235); text-align: left; font-size: .9rem; }
.tbl th { background: rgb(249 250 251); font-weight: 600; color: rgb(55 65 81); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.tbl tr:hover td { background: rgb(249 250 251); }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Score pill */
.score-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.75rem; padding: .15rem .45rem; border-radius: .375rem;
  font-weight: 600; font-size: .8rem; font-variant-numeric: tabular-nums;
}
.score-w { background: #ecfdf5; color: #065f46; }
.score-l { background: #fef2f2; color: #991b1b; }
.score-d { background: #f3f4f6; color: #374151; }
.score-bye { background: #fffbeb; color: #92400e; }

/* Form niceties */
.input {
  display: block; width: 100%;
  padding: .55rem .75rem; border: 1px solid rgb(209 213 219);
  border-radius: .5rem; background: white; font-size: .9rem;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus { outline: none; border-color: #ff7a14; box-shadow: 0 0 0 3px rgba(255,122,20,.15); }
.label { display: block; font-size: .8rem; font-weight: 600; color: rgb(55 65 81); margin-bottom: .35rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .55rem 1rem; border-radius: .5rem; font-weight: 600; font-size: .9rem;
  transition: background-color .15s, transform .05s; cursor: pointer; border: none;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: #f15c0a; color: white; }
.btn-primary:hover { background: #c8430b; }
.btn-ghost { background: transparent; color: rgb(55 65 81); }
.btn-ghost:hover { background: rgb(243 244 246); }
.btn-outline { background: white; color: rgb(55 65 81); border: 1px solid rgb(209 213 219); }
.btn-outline:hover { background: rgb(249 250 251); }

/* ══════════════════════════════════════════════════════════════════════
   BRAND SURFACE GRADIENT — locked theme (set 2026-06-08, owner request)
   The signature 8by8verse blend: deep cosmic indigo → ink navy → saffron
   rust, on the diagonal. THIS is the brand surface. Use .brand-gradient on
   every hero / dashboard header / feature dark panel so the whole product
   reads as one identity. Single source of truth — tune the colours here.
   Palette: cosmic-900 #312e81 · ink-900 #1f2230 · saffron-900 #7f2f12
   (matches the Tailwind classes  from-cosmic-900 via-ink-900 to-saffron-900)
   ══════════════════════════════════════════════════════════════════════ */
.brand-gradient {
  background-color: #1f2230;   /* fallback */
  background-image: linear-gradient(135deg, #312e81 0%, #1f2230 52%, #7f2f12 100%);
}
/* Punchier multi-stop version for smaller accent panels / banners. */
.brand-gradient-vivid {
  background-color: #312e81;
  background-image: linear-gradient(120deg, #4338ca 0%, #312e81 28%, #1f2230 55%, #9e3611 82%, #f15c0a 100%);
}
/* Soft light tint for sections that should only hint the brand. */
.brand-gradient-soft {
  background-image: linear-gradient(135deg, #eef2ff 0%, #ffffff 50%, #fff8ed 100%);
}
/* Gradient wordmark / headline accent on LIGHT backgrounds. */
.brand-gradient-text {
  background-image: linear-gradient(90deg, #4f46e5, #f15c0a 72%, #ff7a14);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Hide scrollbar on horizontal nav strips (federation micro-site section nav) */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }