/* ==========================================================================
   SAMPLE — arcade: three small games
   ==========================================================================
   Games are the honest way to show interaction work, because a game cannot
   hide behind a nice screenshot: it either plays well or it does not. Each of
   these three was chosen for one specific engineering problem that is easy to
   get subtly wrong, and the write-up under each says what that problem is.

   Scoped under .arc.
   ========================================================================== */

.arc {
  --bg:     #0d0b14;
  --bg-2:   #141120;
  --panel:  #1a1626;
  --line:   #292236;
  --line-2: #3d3352;
  --ink:    #f0edf7;
  --ink-2:  #a79fc0;
  --ink-3:  #8b83a6;

  --hot:    #f472b6;
  --lime:   #a3e635;
  --amber:  #fbbf24;
  --cyan:   #22d3ee;
  --violet: #a78bfa;
  --red:    #fb7185;

  --sans: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
.arc *, .arc *::before, .arc *::after { box-sizing: border-box; }
.arc svg { display: block; }
.arc a { color: var(--cyan); }
.arc :focus-visible { outline-color: var(--violet); }

.arc-wrap { width: 100%; max-width: 76rem; margin-inline: auto; padding: 0 clamp(1rem, 3vw, 2rem) 5rem; }

/* ------------------------------------------------------------------ head --- */

.arc-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) 2rem; text-align: center; }
.arc-hero h1 {
  margin: 0;
  font-size: clamp(2.4rem, 7vw, 4.5rem);
  letter-spacing: -0.04em;
  line-height: .95;
  font-weight: 800;
  background: linear-gradient(100deg, var(--hot), var(--violet) 45%, var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.arc-hero p { margin: 1.1rem auto 0; max-width: 40rem; color: var(--ink-2); line-height: 1.65; }

/* --------------------------------------------------------------- switcher --- */

.arc-tabs {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
  margin-bottom: 2rem;
}
.arc-tab {
  font: inherit; font-size: .86rem; font-weight: 600;
  padding: .55rem 1.1rem;
  border-radius: 99px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--ink-2);
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .1s;
}
.arc-tab:hover { color: var(--ink); border-color: var(--ink-3); }
.arc-tab:active { transform: scale(.97); }
.arc-tab[aria-selected="true"] { background: var(--violet); border-color: var(--violet); color: #16111f; }

.arc-panel[hidden] { display: none; }

/* ----------------------------------------------------------------- board --- */

.arc-stage {
  /* Sized to its own game rather than to the widest one — a 9x9 grid floating
     in a panel built for the word keyboard reads as an unfinished screen. */
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(1rem, 3vw, 1.6rem);
  display: grid;
  gap: 1rem;
  justify-items: center;
}

/* A little depth so the board reads as a physical thing rather than a table.
   One inset highlight, no drop shadow — the panel is already floating. */
.ms-grid, .tw-grid, .wd-rows {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06),
              0 12px 28px -18px rgba(0, 0, 0, .9);
}
.ms-cell:not([data-open]) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }

.arc-bar {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  width: 100%;
  justify-content: center;
}
.arc-bar .sp { flex: 1 1 auto; }

.arc-stat {
  display: flex; flex-direction: column; align-items: center;
  min-width: 4.5rem;
  padding: .4rem .8rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.arc-stat dt { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.arc-stat dd { margin: .15rem 0 0; font-family: var(--mono); font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.abtn {
  font: inherit; font-size: .82rem; font-weight: 600;
  padding: .5rem 1rem;
  border-radius: 9px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--ink);
  cursor: pointer;
  transition: background .16s, border-color .16s, transform .1s;
}
.abtn:hover { background: #201a2e; border-color: var(--ink-3); }
.abtn:active { transform: scale(.97); }
.abtn[disabled] { opacity: .4; cursor: not-allowed; }
.abtn--go { background: var(--violet); border-color: var(--violet); color: #16111f; }
.abtn--go:hover { background: #b9a3ff; border-color: #b9a3ff; }

.arc-msg {
  min-height: 1.6rem;
  font-size: .88rem;
  font-weight: 600;
  text-align: center;
  color: var(--ink-2);
}
.arc-msg[data-k="win"]  { color: var(--lime); }
.arc-msg[data-k="lose"] { color: var(--red); }

/* ----------------------------------------------------------- minesweeper --- */

.ms-grid {
  display: grid;
  gap: 2px;
  /* The gap IS the grid lines, so it has to contrast with the cells. An
     earlier version used --line here against a #2a2338 cell — one hex step
     apart, which painted the whole board as one blank rectangle. */
  background: var(--bg);
  border: 2px solid var(--bg);
  border-radius: 8px;
  overflow: hidden;
  touch-action: manipulation;
}
.ms-cell {
  width: clamp(26px, 7.4vw, 34px);
  height: clamp(26px, 7.4vw, 34px);
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: clamp(.78rem, 2.6vw, .95rem);
  font-weight: 700;
  border: 0;
  background: #372e4c;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  transition: background .1s;
  user-select: none;
}
.ms-cell:hover:not([data-open]) { background: #443a5c; }
.ms-cell[data-open] { background: #191426; cursor: default; }
.ms-cell[data-flag] { background: #3a2740; }
.ms-cell[data-mine][data-open] { background: var(--red); color: #2a0d13; }
.ms-cell[data-wrong] { background: #4a2030; }
/* Standard Minesweeper colours — they are muscle memory for anyone who has
   played it, so changing them for the sake of the palette would cost more
   than it gained. */
.ms-cell[data-n="1"] { color: #60a5fa; }
.ms-cell[data-n="2"] { color: #4ade80; }
.ms-cell[data-n="3"] { color: #fb7185; }
.ms-cell[data-n="4"] { color: #c084fc; }
.ms-cell[data-n="5"] { color: #fbbf24; }
.ms-cell[data-n="6"] { color: #22d3ee; }
.ms-cell[data-n="7"] { color: #e2e8f0; }
.ms-cell[data-n="8"] { color: #94a3b8; }

/* ------------------------------------------------------------------ 2048 --- */

.tw-grid {
  position: relative;
  width: min(88vw, 24rem);
  aspect-ratio: 1;
  background: var(--bg-2);
  border-radius: 12px;
  padding: 8px;
  touch-action: none;
}
.tw-cellbg {
  position: absolute;
  background: #221c30;
  border-radius: 8px;
}
.tw-tile {
  position: absolute;
  display: grid; place-items: center;
  border-radius: 8px;
  font-family: var(--mono);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: #3b3350;
  color: var(--ink);
  transition: transform .13s ease-out;
  will-change: transform;
}
.tw-tile[data-new]   { animation: tw-pop .16s ease-out; }
.tw-tile[data-merge] { animation: tw-bump .16s ease-out; }
@keyframes tw-pop  { from { transform: scale(.1); } }
@keyframes tw-bump { 50% { transform: scale(1.16); } }

.tw-tile[data-v="2"]    { background: #3b3350; }
.tw-tile[data-v="4"]    { background: #494066; }
.tw-tile[data-v="8"]    { background: #6d5bb0; }
.tw-tile[data-v="16"]   { background: #7c62d4; }
.tw-tile[data-v="32"]   { background: #9169e8; color: #150f22; }
.tw-tile[data-v="64"]   { background: #a78bfa; color: #150f22; }
.tw-tile[data-v="128"]  { background: #22d3ee; color: #06212a; }
.tw-tile[data-v="256"]  { background: #34d399; color: #052e21; }
.tw-tile[data-v="512"]  { background: #a3e635; color: #1a2205; }
.tw-tile[data-v="1024"] { background: #fbbf24; color: #2a1c00; }
.tw-tile[data-v="2048"] { background: #f472b6; color: #2b0b1c; box-shadow: 0 0 0 3px rgba(244,114,182,.35); }

/* ------------------------------------------------------------------ word --- */

.wd-rows { display: grid; gap: 6px; justify-content: center; }
.wd-row  { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.wd-cell {
  width: clamp(42px, 12vw, 56px);
  height: clamp(42px, 12vw, 56px);
  display: grid; place-items: center;
  border: 2px solid var(--line-2);
  border-radius: 8px;
  font-size: clamp(1.2rem, 4.4vw, 1.6rem);
  font-weight: 800;
  text-transform: uppercase;
  background: transparent;
}
.wd-cell[data-typed] { border-color: var(--ink-3); animation: wd-tap .1s ease-out; }
@keyframes wd-tap { from { transform: scale(.92); } }
.wd-cell[data-s="hit"]  { background: var(--lime);  border-color: var(--lime);  color: #1a2205; }
.wd-cell[data-s="near"] { background: var(--amber); border-color: var(--amber); color: #2a1c00; }
.wd-cell[data-s="miss"] { background: #2a2338; border-color: #2a2338; color: var(--ink-3); }
.wd-row[data-bad] { animation: wd-shake .32s; }
@keyframes wd-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.wd-keys { display: grid; gap: 5px; margin-top: .4rem; }
.wd-keyrow { display: flex; gap: 5px; justify-content: center; }
.wd-key {
  font: inherit; font-size: .78rem; font-weight: 700;
  min-width: clamp(24px, 8vw, 34px);
  height: 44px;
  padding: 0 .35rem;
  border: 0; border-radius: 6px;
  background: #322a44;
  color: var(--ink);
  cursor: pointer;
  text-transform: uppercase;
  transition: background .15s, color .15s, transform .08s;
}
.wd-key:hover { background: #3d3357; }
.wd-key:active { transform: scale(.94); }
.wd-key--wide { min-width: clamp(44px, 13vw, 62px); font-size: .68rem; letter-spacing: .04em; }
.wd-key[data-s="hit"]  { background: var(--lime);  color: #1a2205; }
.wd-key[data-s="near"] { background: var(--amber); color: #2a1c00; }
.wd-key[data-s="miss"] { background: #1f1a2b; color: var(--ink-3); }

/* ------------------------------------------------------------- the notes --- */

.arc-note {
  margin-top: 1.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(1.1rem, 3vw, 1.8rem);
}
.arc-note h2 { margin: 0 0 .5rem; font-size: 1rem; }
.arc-note h2 span {
  display: inline-block;
  font-family: var(--mono); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--violet);
  margin-right: .5rem;
}
.arc-note p { margin: 0 0 .7rem; color: var(--ink-2); line-height: 1.7; max-width: 46rem; }
.arc-note p:last-child { margin-bottom: 0; }
.arc-note code {
  font-family: var(--mono); font-size: .86em;
  background: #221c30; border-radius: 4px; padding: .1em .35em; color: var(--cyan);
}

.arc-outro { margin-top: 2rem; text-align: center; color: var(--ink-2); font-size: .9rem; }
.arc-outro a { text-decoration: underline; text-underline-offset: 2px; }


/* ------------------------------------------------------------- narrow --- */

/*
 * The word keyboard is the widest thing in the set — ten keys plus gaps come
 * to about 360px on their own, which with the stage padding tips a 390px
 * phone into a horizontal scroll. Below that width the keys stop having a
 * fixed size and share the row instead.
 */
@media (max-width: 30rem) {
  .arc-stage { padding: .75rem; }
  .wd-keys { width: 100%; }
  .wd-keyrow { gap: 4px; }
  .wd-key { min-width: 0; flex: 1 1 auto; padding: 0 .15rem; font-size: .72rem; }
  .wd-key--wide { flex: 1.6 1 auto; font-size: .6rem; }
  .arc-bar { gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .arc *, .arc *::before, .arc *::after {
    transition-duration: .01ms !important; animation-duration: .01ms !important;
  }
}

/* ====================================================================== */
/*  4. TETRIS                                                              */
/* ====================================================================== */

.tt-wrap { display: flex; gap: .9rem; align-items: flex-start; }
.tt-grid {
  display: grid;
  /* 20 rows is a lot of height next to a 9x9 or a 4x4, so the cell is smaller
     here than in the other boards to keep the six panels roughly the same size. */
  --cell: clamp(16px, 4.6vw, 23px);
  grid-template-columns: repeat(10, var(--cell));
  grid-auto-rows: var(--cell);
  gap: 1px;
  background: #0d0b14;
  border: 2px solid #0d0b14;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px -18px rgba(0,0,0,.9);
}
.tt-cell { background: #221c30; border-radius: 3px; }
/* One colour per tetromino, kept to the traditional set — players read the
   shapes by colour before they read the geometry. */
.tt-cell[data-p="I"] { background: #22d3ee; }
.tt-cell[data-p="O"] { background: #fbbf24; }
.tt-cell[data-p="T"] { background: #c084fc; }
.tt-cell[data-p="S"] { background: #4ade80; }
.tt-cell[data-p="Z"] { background: #fb7185; }
.tt-cell[data-p="J"] { background: #60a5fa; }
.tt-cell[data-p="L"] { background: #fb923c; }
.tt-cell[data-ghost] { background: transparent; box-shadow: inset 0 0 0 2px rgba(255,255,255,.16); }
.tt-cell[data-clear] { animation: tt-flash .18s ease-out; }
@keyframes tt-flash { from { background: #fff; } }

.tt-side { display: grid; gap: .6rem; align-content: start; min-width: 6.5rem; }
.tt-next {
  display: grid; grid-template-columns: repeat(4, 12px); grid-auto-rows: 12px; gap: 1px;
  padding: .45rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px;
}
.tt-next span { border-radius: 2px; background: transparent; }
.tt-lab { font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

/* The bag readout — the whole point of the write-up, so it is on screen. */
.tt-bag { display: flex; gap: 3px; flex-wrap: wrap; }
.tt-bag i {
  width: 14px; height: 14px; border-radius: 3px; font-style: normal;
  display: grid; place-items: center; font-size: .5rem; font-weight: 700; color: #16111f;
}
.tt-bag i[data-used] { opacity: .22; }

/* ====================================================================== */
/*  5. SUDOKU                                                              */
/* ====================================================================== */

.sd-grid {
  display: grid;
  grid-template-columns: repeat(9, var(--cell, 34px));
  grid-auto-rows: var(--cell, 34px);
  background: var(--line-2);
  gap: 1px;
  border: 2px solid var(--line-2);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 28px -18px rgba(0,0,0,.9);
}
.sd-cell {
  font: inherit; font-family: var(--mono); font-size: clamp(.85rem, 3vw, 1.05rem); font-weight: 600;
  border: 0; padding: 0;
  display: grid; place-items: center;
  background: var(--panel); color: var(--ink);
  cursor: pointer;
}
/* The 3x3 boxes are drawn with heavier gaps rather than borders, so the grid
   lines never double up at a box edge. */
.sd-cell[data-c="2"], .sd-cell[data-c="5"] { margin-inline-end: 2px; }
.sd-cell[data-r="2"], .sd-cell[data-r="5"] { margin-block-end: 2px; }
.sd-cell[data-given] { background: #241e33; color: var(--ink-2); cursor: default; font-weight: 700; }
.sd-cell[data-sel]   { background: var(--violet); color: #16111f; }
.sd-cell[data-peer]  { background: #2a2340; }
.sd-cell[data-bad]   { color: var(--red); }
.sd-cell[data-done]  { color: var(--lime); }

.sd-pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; max-width: 18rem; width: 100%; }
.sd-key {
  font: inherit; font-family: var(--mono); font-size: .95rem; font-weight: 700;
  padding: .5rem 0; border-radius: 8px;
  border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink);
  cursor: pointer;
}
.sd-key:hover { background: #241e33; border-color: var(--ink-3); }
.sd-key--wide { grid-column: span 2; font-size: .72rem; letter-spacing: .06em; }

/* ====================================================================== */
/*  6. SLIDING PUZZLE                                                      */
/* ====================================================================== */

.sl-grid {
  display: grid;
  grid-template-columns: repeat(4, var(--cell, 62px));
  grid-auto-rows: var(--cell, 62px);
  gap: 6px;
  padding: 6px;
  background: var(--bg-2);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px -18px rgba(0,0,0,.9);
}
.sl-tile {
  font: inherit; font-family: var(--mono); font-size: 1.25rem; font-weight: 700;
  border: 0; border-radius: 9px;
  background: #3b3350; color: var(--ink);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .14s, transform .1s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.sl-tile:hover:not([disabled]) { background: #4a4066; }
.sl-tile:active:not([disabled]) { transform: scale(.96); }
.sl-tile[data-home] { background: #4c7a4a; }
.sl-tile[data-blank] { background: transparent; box-shadow: none; cursor: default; }

.arc-hint { font-size: .78rem; color: var(--ink-3); text-align: center; margin: 0; max-width: 26rem; line-height: 1.6; }
.arc-hint code { font-family: var(--mono); background: #221c30; border-radius: 3px; padding: .05em .3em; color: var(--cyan); }