.g-hint { color: var(--warn); font-size: 13px; text-align: center; max-width: 620px; line-height: 1.5; }
.g-row { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.g-input { display: flex; gap: 8px; width: 100%; max-width: 420px; }
.g-input input { text-align: center; font-family: var(--mono); font-size: 17px; letter-spacing: .12em; text-transform: uppercase; }
.g-stat { font-family: var(--mono); font-size: 13px; color: var(--ink2); }
.g-stat b { color: var(--acc2); }
.g-note { color: var(--ink3); font-size: 12.5px; text-align: center; }
.done-veil { text-align: center; padding: 14px; }

/* wordle */
.wd-grid { display: grid; gap: 6px; justify-content: center; }
.wd-row { display: grid; grid-template-columns: repeat(5, 54px); gap: 6px; }
.wd-cell {
  width: 54px; height: 54px; display: grid; place-items: center; border-radius: 8px;
  font-size: 25px; font-weight: 800; text-transform: uppercase; border: 2px solid var(--line2);
  background: #0d111a; transition: transform .12s;
}
.wd-cell.c { background: #2c9e63; border-color: #2c9e63; }
.wd-cell.p { background: #b8952f; border-color: #b8952f; }
.wd-cell.a { background: #262d3d; border-color: #262d3d; color: var(--ink3); }
.wd-cell.live { border-color: var(--acc); }
.kb { display: flex; flex-direction: column; gap: 6px; align-items: center; margin-top: 6px; }
.kb-row { display: flex; gap: 5px; }
.kb button {
  min-width: 34px; height: 46px; padding: 0 8px; border-radius: 7px; border: 1px solid var(--line2);
  background: var(--panel2); font-weight: 700; cursor: pointer; font-size: 13px;
}
.kb button.c { background: #2c9e63; border-color: #2c9e63; }
.kb button.p { background: #b8952f; border-color: #b8952f; }
.kb button.a { background: #10131c; color: var(--ink3); border-color: #1a1f2b; }
.kb button.wide { min-width: 58px; font-size: 11.5px; }

/* anagram */
.rack { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.rack button {
  width: 52px; height: 58px; font-size: 26px; font-weight: 800; text-transform: uppercase;
  border-radius: 10px; border: 2px solid var(--line2); background: linear-gradient(180deg,#242c3d,#1a2130); cursor: pointer;
  box-shadow: 0 3px 0 #0d1119;
}
.rack button:active { transform: translateY(2px); box-shadow: 0 1px 0 #0d1119; }
.rack button.used { opacity: .3; }
.typed { font-family: var(--mono); font-size: 26px; letter-spacing: .18em; min-height: 34px; text-transform: uppercase; font-weight: 800; color: var(--acc2); }
.found { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; max-width: 720px; }
.found span { font-family: var(--mono); font-size: 12.5px; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; text-transform: uppercase; }
.found span.l6 { border-color: var(--warn); color: var(--warn); }
.found span.l7 { border-color: var(--good); color: var(--good); }
.meter { width: 100%; max-width: 460px; height: 9px; background: #0c1018; border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--acc), var(--good)); transition: width .3s; }

/* cipher */
.cipher-text { display: flex; flex-wrap: wrap; gap: 14px 20px; justify-content: center; max-width: 860px; }
.cw { display: flex; gap: 3px; }
.cl { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.cl .plain {
  width: 26px; height: 32px; display: grid; place-items: center; font-family: var(--mono); font-size: 20px;
  font-weight: 700; border-bottom: 2px solid var(--line2); border-radius: 3px 3px 0 0;
}
.cl.sel .plain { background: rgba(124,92,255,.28); border-color: var(--acc); }
.cl.given .plain { color: var(--good); border-color: var(--good); }
.cl.filled .plain { color: var(--acc2); }
.cl .cipher { font-family: var(--mono); font-size: 10.5px; color: var(--ink3); letter-spacing: .05em; }
.cl.sel .cipher { color: var(--acc); font-weight: 800; }
.freq { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; max-width: 720px; }
.freq button {
  font-family: var(--mono); font-size: 11px; padding: 4px 7px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--panel2); cursor: pointer; color: var(--ink2);
}
.freq button.done { opacity: .35; }
.freq button.sel { border-color: var(--acc); color: #fff; }

/* numbers */
.target-big { font-family: var(--mono); font-size: 56px; font-weight: 900; color: var(--warn); letter-spacing: -.02em; line-height: 1; }
.tiles { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; }
.tile {
  min-width: 66px; height: 66px; padding: 0 10px; border-radius: 12px; border: 2px solid var(--line2);
  background: linear-gradient(180deg,#242c3d,#1a2130); font-family: var(--mono); font-size: 22px; font-weight: 800; cursor: pointer;
  box-shadow: 0 3px 0 #0d1119;
}
.tile.sel { border-color: var(--acc); background: rgba(124,92,255,.2); }
.tile.hit { border-color: var(--good); color: var(--good); }
.tile:active { transform: translateY(2px); box-shadow: 0 1px 0 #0d1119; }
.ops { display: flex; gap: 7px; }
.ops button { width: 52px; height: 52px; font-size: 24px; border-radius: 10px; border: 1px solid var(--line2); background: var(--panel2); cursor: pointer; font-weight: 700; }
.ops button.on { background: var(--acc); border-color: var(--acc); color: #fff; }
.steps { font-family: var(--mono); font-size: 13px; color: var(--ink2); display: flex; flex-direction: column; gap: 3px; align-items: center; }

/* grid games */
.grid-wrap { display: inline-grid; gap: 8px; }
.nono { display: grid; }
.nono .corner { }
.nono .clue-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; font-family: var(--mono); font-size: 11.5px; color: var(--ink2); padding-bottom: 4px; gap: 1px; }
.nono .clue-row { display: flex; align-items: center; justify-content: flex-end; font-family: var(--mono); font-size: 11.5px; color: var(--ink2); padding-right: 6px; gap: 4px; }
.nono .clue-col.ok, .nono .clue-row.ok { color: var(--good); }
.cells { display: grid; gap: 2px; }
.cells .cell {
  aspect-ratio: 1; border-radius: 3px; background: #10141d; border: 1px solid #1c2231; cursor: pointer;
  display: grid; place-items: center; font-size: 13px; color: var(--ink3); user-select: none;
}
.cells .cell.f { background: var(--ink); border-color: var(--ink); }
.cells .cell.x { color: var(--bad); }
.cells .cell:hover { border-color: var(--acc); }
.cells.b5 { grid-template-columns: repeat(5, 1fr); }

.lo-grid { display: grid; gap: 8px; }
.lo-cell {
  aspect-ratio: 1; border-radius: 12px; border: 2px solid #232a3a; background: #12161f; cursor: pointer;
  transition: background .12s, box-shadow .12s, border-color .12s;
}
.lo-cell.on { background: radial-gradient(circle at 35% 30%, #ffe89a, var(--warn)); border-color: #ffe08a; box-shadow: 0 0 22px rgba(255,200,87,.45); }
.lo-cell:hover { border-color: var(--acc); }

.sky { display: grid; gap: 3px; }
.sky .clue { display: grid; place-items: center; font-family: var(--mono); font-weight: 800; color: var(--acc2); font-size: 15px; }
.sky .scell {
  aspect-ratio: 1; border-radius: 6px; background: #10141d; border: 1px solid #1c2231; cursor: pointer;
  display: grid; place-items: center; font-family: var(--mono); font-size: 20px; font-weight: 800;
}
.sky .scell:hover { border-color: var(--acc); }
.sky .scell.set { background: var(--panel2); color: var(--ink); }
.sky .scell.bad { border-color: var(--bad); }

.pipes { display: grid; gap: 3px; }
.pipe {
  aspect-ratio: 1; background: #0f131c; border: 1px solid #1a2029; border-radius: 4px; cursor: pointer;
  position: relative; overflow: hidden;
}
.pipe:hover { border-color: var(--acc); }
.pipe svg { width: 100%; height: 100%; display: block; }
.pipe .stroke { stroke: #46506b; stroke-width: 13; stroke-linecap: round; fill: none; transition: stroke .2s; }
.pipe.flow .stroke { stroke: var(--acc2); }
.pipe.src { background: rgba(94,207,214,.12); }
.pipe .node { fill: #46506b; transition: fill .2s; }
.pipe.flow .node { fill: var(--acc2); }

.mem-grid { display: grid; gap: 7px; }
.mem-cell { aspect-ratio: 1; border-radius: 10px; background: #12161f; border: 2px solid #222938; cursor: pointer; transition: .1s; }
.mem-cell.show { background: linear-gradient(180deg,#8a6bff,#6a48f0); border-color: #9a7dff; box-shadow: 0 0 18px rgba(124,92,255,.5); }
.mem-cell.pick { background: var(--panel2); border-color: var(--acc2); }
.mem-cell.right { background: rgba(70,209,138,.5); border-color: var(--good); }
.mem-cell.wrong { background: rgba(255,107,122,.35); border-color: var(--bad); }
.lives { display: flex; gap: 5px; font-size: 18px; }

.odd-grid { display: grid; gap: 8px; }
.odd-cell { aspect-ratio: 1; display: grid; place-items: center; cursor: pointer; border-radius: 8px; }
.odd-cell:hover { background: rgba(255,255,255,.05); }
.odd-cell.lock { pointer-events: none; }
.odd-cell svg { width: 78%; height: 78%; }

/* mastermind */
.mm-board { display: flex; flex-direction: column; gap: 6px; }
.mm-row { display: flex; align-items: center; gap: 10px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; }
.mm-row.live { border-color: var(--acc); }
.mm-pegs { display: flex; gap: 6px; }
.peg { width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(0,0,0,.35); cursor: pointer; }
.peg.empty { background: #0e121b; border: 2px dashed var(--line2); cursor: pointer; }
.mm-fb { display: grid; grid-template-columns: repeat(3, 9px); gap: 3px; margin-left: auto; }
.mm-fb i { width: 9px; height: 9px; border-radius: 50%; background: #1b2130; }
.mm-fb i.e { background: var(--good); }
.mm-fb i.n { background: var(--warn); }
.palette { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; }
.palette button { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); cursor: pointer; }
.palette button.on { outline: 3px solid var(--acc); outline-offset: 2px; }

/* sequence */
.seq-terms { font-family: var(--mono); font-size: clamp(20px, 4vw, 34px); font-weight: 800; letter-spacing: .06em; text-align: center; }
.seq-terms .q { color: var(--acc); }
.seq-count { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.seq-count i { width: 12px; height: 12px; border-radius: 3px; background: #1b2130; display: block; }
.seq-count i.ok { background: var(--good); }
.seq-count i.no { background: var(--bad); }
.seq-count i.now { background: var(--acc); }

/* ladder */
.ladder { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.rung { font-family: var(--mono); font-size: 22px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; padding: 7px 18px; border-radius: 9px; background: var(--panel2); border: 1px solid var(--line); }
.rung.start { border-color: var(--acc2); color: var(--acc2); }
.rung.end { border-color: var(--good); color: var(--good); }
.rung.goal { border-style: dashed; opacity: .6; }
.ladder-arrow { color: var(--ink3); font-size: 13px; }