:root{
  --line-height: 6px;
  --line-opacity: 0.35;
  --glass-bg: 255 255 255;          /* base glass tint (R G B) */
  --glass-alpha: 0.18;              /* base tint alpha */
  --glass-border: 255 255 255 / 0.35;
  --glass-shadow: 0 10px 35px rgba(231, 225, 225, 0.342);
  --radius-2xl: 1.25rem;
  --radius-xl: 1rem;
  --radius-lg: .75rem;

  /* Equal-height card control */
  --card-h: 100px;
}

/* Base resets */
* { box-sizing: border-box; }
html, body { height: 100%; 
background-color:#1b1b1b;}


/* Smooth bottom fade */
body::after{
  content:"";
  position: fixed;
  inset: 60% 0 0 0; /* start the fade a bit higher */
  background: #1b1b1b;
  pointer-events: none;
  z-index: -1;
}

/* Titles (Cookie for H1, Smooch Sans for H2/H3) */
h1, .board-title{
  font-family: 'Cookie', cursive;
  font-weight: 400;
  font-size: clamp(6.25rem, 10vw, 20.25rem);
  line-height: 1.1;
  margin: 0 0 -20px 0;
}

/* H2 + H3 titles */
h2, h3,
.modal-title, .card h3{
  font-family: 'Smooch Sans', sans-serif;
  font-weight: 600;
}

/* Rainbow line (top) */
.rainbow-line{
  position: fixed;
  left: 0; top: 0; transform: none;
  width: 100vw; height: var(--line-height);
  background: linear-gradient(
    90deg,
    rgba(255, 99, 132, var(--line-opacity)) 0%,
    rgba(255, 159, 64,  var(--line-opacity)) 16.6%,
    rgba(255, 205, 86,  var(--line-opacity)) 33.3%,
    rgba(75,  192, 192, var(--line-opacity)) 50%,
    rgba(54,  162, 235, var(--line-opacity)) 66.6%,
    rgba(153, 102, 255, var(--line-opacity)) 83.3%,
    rgba(201, 203, 207, var(--line-opacity)) 100%
  );
  box-shadow: 0 0 12px rgba(0,0,0,0.04);
  z-index: 20;
}
.rainbow-line::after{
  content:"";
  position:absolute; inset:-6px 0;
  background:inherit; opacity:.15; filter: blur(6px);
}

/* Layout */
.container{
  /* center the board in the viewport */
  min-height: calc(100svh - 96px);  /* leaves room for the fixed rainbow line + breathing */
  display: grid;
  place-items: center;               /* centers on both axes */

  /* spacing */
  padding: clamp(24px, 4vw, 48px);
  margin: 0;

}

/* Glass board */
.glass-board{
  width: min(1100px, 100%);
  padding: clamp(18px, 2.5vw, 28px);
  border-radius: var(--radius-2xl);
  background: #44434373;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid rgb(var(--glass-border));
  box-shadow: var(--glass-shadow);
  position: relative;
  color:rgb(202, 198, 198);
}
.glass-board::before{
  content:"";
  position:absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(1200px 300px at 50% -40%, rgba(255,255,255,.35), transparent 60%);
  pointer-events:none;
}

/* Header */
.board-header{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px; margin-bottom: 16px;
    color: rgb(61, 59, 59);
}
.board-sub{
  margin: 2px 0 0;
  color: #96999e;
  font-size: .95rem;
}

/* Responsive grid: 1 (mobile) → 2 (tablet) → 4 (desktop) */
.cards{
  display: grid;
  gap: clamp(12px, 2vw, 18px);
  grid-template-columns: 1fr; /* mobile: 1 column */
  justify-items: stretch;
  align-items: stretch;        /* equal row heights */
}
@media (min-width: 768px){
  .cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px){
  .cards{ grid-template-columns: repeat(4, 1fr); }

  /* desktop override kept as-is (final computed margin: 0) */
  h1, .board-title{
    margin: 0 0 0 0;
  }
}

/* Cards (equal height) */
.card{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: var(--card-h);   /* use height: for exact equality */
  background: rgba(85, 83, 83, 0.712);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-xl);
  padding: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
  position: relative;
  overflow: clip;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.12);
}
.card:active{ transform: translateY(0); }

.card h3{
  margin: 8px 0 6px;
  font-size: 1.05rem;
}
.card p{
  margin: 0;
  color: #92928d;
  font-size: .95rem;
  /* keep snippets tidy so content doesn't break equal height */
  flex: 1 1 auto;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;       /* ~3 lines, then ellipsis */
  -webkit-box-orient: vertical;
}

.pill{
  display:inline-flex; align-items:center; gap:8px;
  font-size:1.1rem; padding:6px 10px; border-radius:999px;
  background:transparent;
  border: none;
  font-family:'Smooch Sans';
}

/* Modal (dialog) */
dialog{
  border: none; padding: 0; margin: auto;
  width: min(720px, 92vw);
  background: rgba(70, 69, 69, 0.925);
  border: 1px solid rgba(102, 101, 101, 0.85);
  border-radius: var(--radius-2xl);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  box-shadow: 0 40px 80px rgba(0,0,0,0.35);
}
dialog[open]{ animation: pop .18s ease-out; }
@keyframes pop{
  from{ transform: translateY(8px) scale(.98); opacity: 0; }
  to{ transform: translateY(0) scale(1); opacity: 1; }
}
.modal-content{
  padding: 20px clamp(18px, 2.5vw, 28px) 24px;
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.75);
}
.modal-title{ margin: 0; font-size: 1.25rem; color:rgb(161, 156, 156); }

/* Modal body — consolidated (style + font) */
.modal-body{
  color:#ffffff;
  line-height: 1.6;
  margin-top: 12px;
  text-align: justify;
  max-height: min(55vh, 420px);
  overflow: auto;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
               "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.modal-actions{
  display:flex; justify-content:flex-end; gap:10px; margin-top: 16px;
}

p{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
               "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Overlay dimmer for <dialog> */
dialog::backdrop{
  background: rgba(15,23,42,0.35);
  backdrop-filter: blur(2px);
}

/* Buttons */
.btn{
  appearance: none; border: 1px solid rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.6);
  padding: 10px 14px; border-radius: var(--radius-lg);
  font-weight: 600; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,0.10);
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 24px rgba(0,0,0,0.16); }
.btn:active{ transform: translateY(0); }
.btn.primary{
  background: linear-gradient(135deg, rgba(255,255,255,0.75), rgba(255,255,255,0.55));
  border: 1px solid rgba(255,255,255,0.95); color:rgb(77, 74, 74);
}

/* Motion respect */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}

/* Mobile-first (default) */
.modal-title, h2{
  font-size: 1.45rem;
  line-height: 1.15;
}
.card h3, h3{
  font-size: 1.25rem;
  line-height: 1.15;
}

/* Tablet */
@media (min-width: 768px){
  .modal-title, h2{ font-size: 1.65rem; }
  .card h3, h3{     font-size: 1.35rem; }
}

/* Desktop+ */
@media (min-width: 1024px){
  .modal-title, h2{ font-size: 1.9rem; }
  .card h3, h3{     font-size: 1.5rem; }
}

/* H1 grayscale gradient sweep */
.board-title.fx-sweep{
  background: linear-gradient(
    90deg,
    #cbccce, #6b7280 25%, #d1d5db 50%, #6b7280 75%, #828385
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: title-sweep 6s linear infinite;
}
@keyframes title-sweep{
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .board-title.fx-sweep{ animation: none; background-position: 100% 50%; }
}

/* Raise the container on desktop only */
@media (min-width: 1024px){
  .container{
    transform: translateY(-80px);
  }
}

/* Animated grayscale sweep border for the card container */
.glass-board.fx-sweep{
  position: relative;
}
.glass-board.fx-sweep::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  /* Thin animated ring using masks */
  padding: 1px; /* ring thickness — tweak 1px–3px */
  background: linear-gradient(
    90deg,
    #0b0f1925, #6b7280d2 25%, #d1d5db 50%, #6b7280a1 75%, #0b0f191c
  );
  background-size: 200% 100%;
  animation: title-sweep 4s linear infinite;

  /* Mask the center so only the ring shows */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;   /* Chrome/Safari */
  mask-composite: exclude;       /* Firefox */

  pointer-events: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .glass-board.fx-sweep::after{ animation: none; background-position: 100% 50%; }
}



/* Right-aligned badge above the cards grid */
.cards-badge{
  display: flex;
  justify-content: flex-end;                    /* push image to the right */
  margin: 0 0 clamp(8px, 5vw, 16px) 0;        /* space above the grid */
}

.cards-badge img{
  width: clamp(56px, 18vw, 120px);              /* responsive size */
  height: auto;
  display: block;
  filter: grayscale(1) contrast(1.05)
          drop-shadow(0 2px 6px rgba(0,0,0,.15));
  opacity: .95;
  z-index:-100;
  rotate:220deg;
  margin-top:-110px;
  opacity: 70%;
}

:root{
  /* updated by the tiny JS below */
  --mx: 50%;
  --my: 50%;
}

.spotlight{
  position: fixed;
  inset: -2px;              /* tiny bleed so no edge gaps */
  pointer-events: none;     /* never blocks clicks */
  z-index: -1;              /* sits behind your content */
  background:
  radial-gradient(240px 240px at var(--mx) var(--my), rgba(255,182,193,0.18) 0%, transparent 60%), /* pastel pink */
  radial-gradient(160px 160px at var(--mx) var(--my), rgba(173,216,230,0.18) 0%, transparent 70%), /* pastel blue */
  radial-gradient(100px 100px at var(--mx) var(--my), rgba(221,160,221,0.20) 0%, transparent 80%); /* pastel purple */

  transition: background-position .06s linear;
}

@media (prefers-reduced-motion: reduce){
  .spotlight{ display: none; }
}

/* Gradient shimmer across the text + gentle caret */
.type{
  background: linear-gradient(90deg, #727070 20%, #f0f3f5 40%, #464545 60%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: type-shimmer 7s linear infinite;
  position: relative;
}


@keyframes type-shimmer{
  0%   { background-position: 200% 0; }
  100% { background-position:   0% 0; }
}


@media (prefers-reduced-motion: reduce){
  .type{ animation: none; }
  .type::after{ animation: none; }
}

footer{  text-align:center; color:var(--muted); font-size:.95rem; 
  opacity: 80%;
  text-align:center;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  font-family: 'Exo';
  border-top:#5654546f 2px solid;
  font-size: 1.2rem;
  font-family: 'Smooch Sans';
  padding:20px;
  margin-top:20px;
  width:100%;}

  footer a{
    font-family:'Smooch Sans'
  }
  
  footer button{
    font-size:1rem;
  }

  footer a{
    text-decoration:none;
    color: rgb(111, 59, 147);
  }

  footer a:hover{
    font-weight:bold;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  .fade-in {
    animation: fadeIn 3s ease-in-out forwards;
  }
  
  /* ============================
   GLOBAL SCROLLBAR STYLING
   Works on Chrome, Edge, Safari, iOS Safari, Android, & Firefox
================================ */

/* ---------- Firefox ---------- */
html {
  scrollbar-width: thin;              /* auto | thin | none */
  scrollbar-color: #1f1f1f #1f1f1f;   /* thumb | track */
}

/* ---------- WebKit Browsers (Chrome, Safari, Edge, etc.) ---------- */
::-webkit-scrollbar {
  width: 20px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #1f1f1f;                /* Track color */
}

::-webkit-scrollbar-thumb {
  background-color: #1f1f1f;          /* Thumb color */
  border-radius: 10px;                /* Rounded corners */
  border: 2px solid #ffffff;          /* Creates the gap effect */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #000000;          /* Hover color */
}