/* Busy brain games: the hub and the play screen, in Busy's sticker style. */
:root {
  /* Patch colours for Stars: light, clearly different side by side, the same in light and dark mode
     (the stars and crosses on them are always dark ink). */
  --g0: #FFE066; --g1: #FF8F8F; --g2: #8EE3B5; --g3: #8FC1FF; --g4: #C3A6FF;
  --g5: #FFB0E0; --g6: #CDD1DB; --g7: #FFB36B; --g8: #D2EE7A; --g9: #7FD8D3;
}

/* ---------- hub ---------- */
.games-hero { padding: 64px 0 28px; text-align: center; }
.games-hero .streak { display: inline-block; margin-top: 12px; font-weight: 800; }
.game-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin: 10px 0 50px; }
.game-card { display: flex; flex-direction: column; gap: 10px; padding: 22px; text-decoration: none; color: var(--ink); background: color-mix(in srgb, var(--c) 18%, var(--surface)); transition: transform .15s; }
.game-card:hover { transform: translate(-2px, -2px); }
.game-card .em { font-size: 2.4rem; }
.game-card h2 { font-size: 1.5rem; margin: 0; }
.game-card p { margin: 0; color: var(--ink-2); }
.game-card .status { font-size: .92rem; font-weight: 700; color: var(--ink); min-height: 2.6em; }
.game-card .go { margin-top: auto; font-weight: 800; }

/* ---------- play screen ---------- */
.game-page { max-width: 760px; margin: 0 auto; padding: 28px 16px 70px; }
.game-page .crumbs { display: inline-block; margin-bottom: 8px; }
.game-page h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin: 0 0 6px; }
.play { margin: 18px 0 30px; position: relative; }
.play-top { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modes { display: inline-flex; border: 2px solid var(--border); border-radius: 999px; overflow: hidden; box-shadow: var(--shadow-sm); }
.modes button { border: 0; background: var(--surface); color: var(--ink); font: inherit; font-weight: 800; padding: 8px 16px; cursor: pointer; }
.modes button[aria-selected="true"] { background: var(--sun); color: #1E1B2E; }
.meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.timer { font-variant-numeric: tabular-nums; font-weight: 800; min-width: 3.2em; text-align: right; }

.board-wrap { display: grid; place-items: center; }
.board { --n: 6; display: grid; grid-template-columns: repeat(var(--n), 1fr); width: min(100%, 520px); aspect-ratio: 1; border: 3px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); background: var(--surface); position: relative; touch-action: none; user-select: none; -webkit-user-select: none; }
.board .cell { all: unset; box-sizing: border-box; display: grid; place-items: center; font-weight: 900; font-size: calc(min(100vw, 520px) / var(--n) * .45); line-height: 1; color: var(--ink); border: 1px solid color-mix(in srgb, var(--border) 25%, transparent); cursor: pointer; position: relative; }
.board .cell:focus-visible { outline: 3px solid var(--sky); outline-offset: -4px; z-index: 2; }
.board { --line: color-mix(in srgb, var(--ink) 80%, transparent); }
.board.stars { --line: #1E1B2E; } /* patches are always light, so their edges are always dark ink */
.board .cell.bt { border-top: 3px solid var(--line); }
.board .cell.br { border-right: 3px solid var(--line); }
.board .cell.bb { border-bottom: 3px solid var(--line); }
.board .cell.bl { border-left: 3px solid var(--line); }
.making { margin: 12px 0 0; font-weight: 700; }

/* Stars */
.board .cell[style*="--g"] { background: var(--g); color: #1E1B2E; border-color: rgba(30, 27, 46, .18); }
.board.stars .cell.bt { border-top-color: var(--line); } .board.stars .cell.br { border-right-color: var(--line); }
.board.stars .cell.bb { border-bottom-color: var(--line); } .board.stars .cell.bl { border-left-color: var(--line); }
.board .cell[style*="--g"][data-v="1"] { color: rgba(30, 27, 46, .5); font-size: calc(min(100vw, 520px) / var(--n) * .35); }
.board .cell[data-v="2"] { color: #1E1B2E; text-shadow: 0 0 0 #1E1B2E; animation: pop .18s ease-out; }
.board .cell.bad[data-v="2"] { color: var(--tomato); }
.board .cell.bad { background-image: repeating-linear-gradient(45deg, transparent 0 6px, color-mix(in srgb, var(--tomato) 30%, transparent) 6px 9px); }

/* Duo: a sun-yellow circle and a grape square, so shape tells them apart too */
.board .tok { width: 58%; aspect-ratio: 1; border: 3px solid #1E1B2E; box-shadow: 2px 2px 0 #1E1B2E; display: none; }
.board .cell[data-v="0"] .tok { display: block; border-radius: 50%; background: var(--sun); animation: pop .18s ease-out; }
.board .cell[data-v="1"] .tok { display: block; border-radius: 22%; background: var(--grape); animation: pop .18s ease-out; }
.board .cell.given { background: color-mix(in srgb, var(--ink) 16%, var(--surface)); cursor: default; }
.board .cell.given .tok { animation: none; }

/* Six */
.board.six .cell.given { color: var(--ink); }
.board.six .cell:not(.given) { color: var(--grape); }
.board.six .cell.sel { background: color-mix(in srgb, var(--sun) 45%, var(--surface)); }
.board.six .cell.bad { color: var(--tomato); }
.pad { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; width: min(100%, 520px); margin: 14px auto 0; }
.pad[hidden] { display: none; }
.pad .btn { min-width: 0; min-height: 48px; padding: 0; font-size: 1.2rem; font-weight: 900; justify-content: center; }

/* Trail */
.board.trail .cell { cursor: crosshair; }
.board.trail .cell.on { background: color-mix(in srgb, var(--tomato) 22%, var(--surface)); }
.board.trail .wr { border-right: 5px solid var(--line); }
.board.trail .wb { border-bottom: 5px solid var(--line); }
.board.trail .num { position: relative; z-index: 2; display: grid; place-items: center; width: 62%; aspect-ratio: 1; border-radius: 50%; background: var(--ink); color: var(--surface); font-size: calc(min(100vw, 520px) / var(--n) * .3); }
.board.trail .line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.board.trail .line polyline { stroke: var(--tomato); stroke-width: .34; stroke-linecap: round; stroke-linejoin: round; }
.board.trail:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }

.play-tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.level-nav { display: inline-flex; gap: 8px; }
.level-nav[hidden] { display: none; }

.win, .picker { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); width: min(94%, 420px); padding: 22px; text-align: center; z-index: 10; background: var(--surface); }
.win .burst { font-size: 3rem; animation: pop .35s ease-out; }
.win h2 { margin: 4px 0 8px; }
.win .row-flex { justify-content: center; margin: 12px 0 6px; flex-wrap: wrap; gap: 8px; display: flex; }
.win .faint .btn { padding: 4px 10px; margin: 2px; font-size: .9rem; }
.picker { text-align: left; max-height: 70vh; overflow: auto; }
.picker-head { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.picker select { font: inherit; padding: 4px 6px; border: 2px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); }
.levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.levels .lv { font: inherit; font-weight: 800; font-size: .85rem; padding: 8px 0; border: 2px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; }
.levels .lv.done { background: var(--mint); color: #1E1B2E; }
.levels .lv.now { outline: 3px solid var(--sky); }
.link { all: unset; text-decoration: underline; cursor: pointer; font-weight: 700; }

.game-rules { margin-top: 10px; }
.game-rules ol { padding-left: 1.2em; }
.game-rules li { margin: 6px 0; }
.more-games { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }

@keyframes pop { from { transform: scale(.6); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .board .cell, .board .tok, .win .burst { animation: none !important; }
}