:root{
  --bgL:#eeeeee; /* light (left) */
  --bgR:#111111; /* dark (right) */
  --ink:#e9ecf1;
  --muted:#98a0ad;
  --stroke:#1e2230;

  /* Rainbow per column */
  --c1:#e53935; /* red */
  --c2:#fb8c00; /* orange */
  --c3:#fdd835; /* yellow */
  --c4:#43a047; /* green (middle) */
  --c5:#1e88e5; /* blue */
  --c6:#5e35b1; /* indigo */
  --c7:#8e24aa; /* violet */

  /* Opposite-progressive greys for text (dark → light) */
  --g1:#eee;  /* darkest */
  --g2:#eee;
  --g3:#eee;
  --g4:#eee;  /* mid */
  --g5:#eee;
  --g6:#eee;
  --g7:#eee;  /* lightest */

  --radius:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  /* Progressive grey background: light (left) -> dark (right) */
  background: linear-gradient(90deg, var(--bgL) 0%, #cfcfcf 20%, #9e9e9e 40%, #6f6f6f 60%, #3a3a3a 80%, var(--bgR) 100%);
  color:#111;
  font:16px/1.5 system-ui, Segoe UI, Roboto, Arial, sans-serif;
}

.wrap{max-width:1100px;margin:auto;padding:32px 20px}
.page-head h1{margin:.1rem 0 .35rem;font-weight:750;letter-spacing:.2px}
.hint{margin:0 0 1.2rem;color:#222}

/* Board (lists stacked vertically) */
.board{
  display:grid;
  gap:14px;
}

/* Each list = 7 equal columns */
.list{
  margin:0;
  padding:10px;
  list-style:none;
  border-radius:var(--radius);
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  align-items:center;
  min-height:72px;
  /* subtle translucent panel so rows stay visible on the gradient */
  background: color-mix(in srgb, white 6%, transparent);
  outline: 1px solid color-mix(in srgb, black 12%, transparent);
}

/* BIG, filled “buttons” */
.list > li{
  justify-self:stretch;      /* fill the column */
  align-self:center;
  text-align:center;
  padding:.85rem 1.1rem;     /* bigger */
  font-weight:700;
  font-size:1.05rem;         /* bigger */
  border-radius:12px;
  border: none;
  background: var(--col, #888);      /* filled with its column color */
  color: var(--fg, #111);            /* opposite progressive grey */
  box-shadow:
    0 10px 22px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.25);
  text-shadow: 0 1px 0 rgba(0,0,0,.15); /* keep text readable on bright colors */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ---------- COLOR BY COLUMN + opposite grey for text ---------- */
/* len-1: [col4] */
.list.len-1 > li:nth-child(1){ grid-column:4/5; --col:var(--c4); --fg:var(--g4); }

/* len-2: [col1, col7] */
.list.len-2 > li:nth-child(1){ grid-column:1/2; --col:var(--c1); --fg:var(--g1); }
.list.len-2 > li:nth-child(2){ grid-column:7/8; --col:var(--c7); --fg:var(--g7); }

/* len-3: [col1, col4, col7] */
.list.len-3 > li:nth-child(1){ grid-column:1/2; --col:var(--c1); --fg:var(--g1); }
.list.len-3 > li:nth-child(2){ grid-column:4/5; --col:var(--c4); --fg:var(--g4); }
.list.len-3 > li:nth-child(3){ grid-column:7/8; --col:var(--c7); --fg:var(--g7); }

/* len-4: [col1, col3, col5, col7] */
.list.len-4 > li:nth-child(1){ grid-column:1/2; --col:var(--c1); --fg:var(--g1); }
.list.len-4 > li:nth-child(2){ grid-column:3/4; --col:var(--c3); --fg:var(--g3); }
.list.len-4 > li:nth-child(3){ grid-column:5/6; --col:var(--c5); --fg:var(--g5); }
.list.len-4 > li:nth-child(4){ grid-column:7/8; --col:var(--c7); --fg:var(--g7); }

/* len-5: [col1, col3, col4, col5, col7] */
.list.len-5 > li:nth-child(1){ grid-column:1/2; --col:var(--c1); --fg:var(--g1); }
.list.len-5 > li:nth-child(2){ grid-column:3/4; --col:var(--c3); --fg:var(--g3); }
.list.len-5 > li:nth-child(3){ grid-column:4/5; --col:var(--c4); --fg:var(--g4); }
.list.len-5 > li:nth-child(4){ grid-column:5/6; --col:var(--c5); --fg:var(--g5); }
.list.len-5 > li:nth-child(5){ grid-column:7/8; --col:var(--c7); --fg:var(--g7); }

/* len-6: [col1, col2, col3, col5, col6, col7] */
.list.len-6 > li:nth-child(1){ grid-column:1/2; --col:var(--c1); --fg:var(--g1); }
.list.len-6 > li:nth-child(2){ grid-column:2/3; --col:var(--c2); --fg:var(--g2); }
.list.len-6 > li:nth-child(3){ grid-column:3/4; --col:var(--c3); --fg:var(--g3); }
.list.len-6 > li:nth-child(4){ grid-column:5/6; --col:var(--c5); --fg:var(--g5); }
.list.len-6 > li:nth-child(5){ grid-column:6/7; --col:var(--c6); --fg:var(--g6); }
.list.len-6 > li:nth-child(6){ grid-column:7/8; --col:var(--c7); --fg:var(--g7); }

/* len-7: [col1..col7] */
.list.len-7 > li:nth-child(1){ grid-column:1/2; --col:var(--c1); --fg:var(--g1); }
.list.len-7 > li:nth-child(2){ grid-column:2/3; --col:var(--c2); --fg:var(--g2); }
.list.len-7 > li:nth-child(3){ grid-column:3/4; --col:var(--c3); --fg:var(--g3); }
.list.len-7 > li:nth-child(4){ grid-column:4/5; --col:var(--c4); --fg:var(--g4); }
.list.len-7 > li:nth-child(5){ grid-column:5/6; --col:var(--c5); --fg:var(--g5); }
.list.len-7 > li:nth-child(6){ grid-column:6/7; --col:var(--c6); --fg:var(--g6); }
.list.len-7 > li:nth-child(7){ grid-column:7/8; --col:var(--c7); --fg:var(--g7); }

/* Responsive */
@media (max-width: 900px){
  .wrap{padding:24px 14px}
  .list{padding:8px; min-height:66px;}
  .list > li{font-size:1rem; padding:.75rem 1rem;}
}