/* 每日趣味游戏页样式：棋盘、状态条、结果态与枢纽页卡片。
   仅依赖 base/assessments 外壳的设计变量与 .tl-button 等通用类，移动端优先。 */

.fg-game {
  max-width: 32rem;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.fg-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.25rem;
  margin-bottom: .75rem;
  font-size: .95rem;
  color: var(--text-soft, #475569);
}

.fg-message {
  min-height: 1.5em;
  margin: 0 0 1rem;
  font-weight: 600;
}

.fg-board {
  display: grid;
  gap: .5rem;
  margin: 0 auto 1rem;
  width: min(100%, 24rem);
  touch-action: manipulation;
}

/* ---- Memory Match ---- */
.fg-memory-grid {
  grid-template-columns: repeat(4, 1fr);
  aspect-ratio: 1;
}

.fg-card-cell {
  position: relative;
  border: 0;
  padding: 0;
  border-radius: .6rem;
  background: transparent;
  cursor: pointer;
  perspective: 600px;
}

.fg-card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .25s ease;
  border-radius: .6rem;
}

.fg-card-cell.is-up .fg-card-inner,
.fg-card-cell.is-matched .fg-card-inner {
  transform: rotateY(180deg);
}

.fg-card-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .6rem;
  backface-visibility: hidden;
  font-size: clamp(1.4rem, 7vw, 2.2rem);
  line-height: 1;
  user-select: none;
}

.fg-card-front {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: rgba(255, 255, 255, .85);
  font-size: clamp(1.2rem, 6vw, 1.8rem);
}

.fg-card-back {
  transform: rotateY(180deg);
  background: #fff;
  border: 2px solid #e9d5ff;
}

.fg-card-cell.is-matched .fg-card-back {
  border-color: #22c55e;
  background: #f0fdf4;
}

/* ---- Sliding puzzle ---- */
.fg-slide-grid {
  grid-template-columns: repeat(3, 1fr);
  aspect-ratio: 1;
}

.fg-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: 0;
  border-radius: .6rem;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
  font-size: clamp(1.6rem, 9vw, 2.6rem);
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

.fg-tile:active {
  transform: scale(.96);
}

.fg-tile.is-correct {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

.fg-tile-gap {
  visibility: hidden;
}

/* ---- Lights Out ---- */
.fg-lights-grid {
  grid-template-columns: repeat(5, 1fr);
  aspect-ratio: 1;
  max-width: 22rem;
}

.fg-light {
  border: 0;
  border-radius: .45rem;
  padding: 0;
  cursor: pointer;
  background: #1e293b;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.fg-light.is-on {
  background: radial-gradient(circle at 35% 30%, #fde68a, #f59e0b 70%);
  box-shadow: 0 0 .75rem rgba(245, 158, 11, .55);
}

/* ---- Word Scramble ---- */
.fg-scramble-word {
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  font-weight: 800;
  letter-spacing: .25em;
  margin: .25rem 0 1rem;
  color: #7c3aed;
}

.fg-word-form {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-bottom: 1rem;
}

.fg-word-form input {
  flex: 1 1 12rem;
  max-width: 16rem;
  padding: .7rem .9rem;
  font-size: 1.05rem;
  border: 2px solid #e2e8f0;
  border-radius: .6rem;
}

.fg-word-form input:focus {
  outline: none;
  border-color: #a855f7;
}

.fg-guess-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.fg-guess-list li {
  font-weight: 600;
  letter-spacing: .15em;
}

.fg-guess-list li.is-wrong { color: #dc2626; }
.fg-guess-list li.is-win { color: #16a34a; }

/* ---- 结果态 / 通用 ---- */
.fg-result {
  border: 2px solid #e9d5ff;
  border-radius: .9rem;
  background: #faf5ff;
  padding: 1.25rem;
}

.fg-result-title {
  margin: 0 0 .35rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: #6d28d9;
}

.fg-result p { margin: .25rem 0; }

.fg-tomorrow {
  font-size: .9rem;
  color: var(--text-soft, #475569);
}

.fg-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  justify-content: center;
  margin-top: .75rem;
  font-size: .95rem;
}

/* ---- 枢纽页 ---- */
.fg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.fg-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.25rem;
  border: 1px solid #e9d5ff;
  border-radius: .9rem;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s ease, transform .15s ease;
}

.fg-card:hover {
  box-shadow: 0 .5rem 1.25rem rgba(124, 58, 237, .15);
  transform: translateY(-2px);
}

.fg-card-name { font-size: 1.2rem; font-weight: 800; color: #6d28d9; }
.fg-card-short { color: var(--text-soft, #475569); font-size: .95rem; }
.fg-card-cta { margin-top: auto; font-weight: 700; font-size: .9rem; color: #7c3aed; }
.fg-intro { margin-bottom: 3rem; }

/* ============================================================
   第二批游戏样式（均在容器属性下作用域）
   ============================================================ */

/* ---- Word Guess ---- */
.fg-wg-grid {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  width: min(100%, 21rem);
  margin: 0 auto .75rem;
}
.fg-wg-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.fg-wg-tile {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  text-transform: uppercase;
  border: 2px solid #cbd5e1;
  border-radius: .35rem;
  background: #fff;
}
.fg-wg-tile.is-correct { background: #16a34a; border-color: #16a34a; color: #fff; }
.fg-wg-tile.is-present { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.fg-wg-tile.is-absent { background: #94a3b8; border-color: #94a3b8; color: #fff; }
.fg-wg-row.is-shake { animation: fg-shake .35s; }
@keyframes fg-shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.fg-wg-keyboard { display: flex; flex-direction: column; gap: .35rem; margin-top: .5rem; }
.fg-wg-krow { display: flex; justify-content: center; gap: .3rem; }
.fg-wg-key {
  min-width: 1.9rem;
  padding: .7rem .35rem;
  border: 0;
  border-radius: .35rem;
  background: #e2e8f0;
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
  touch-action: manipulation;
}
.fg-wg-key.is-correct { background: #16a34a; color: #fff; }
.fg-wg-key.is-present { background: #f59e0b; color: #fff; }
.fg-wg-key.is-absent { background: #94a3b8; color: #fff; }
.fg-wg-wide { min-width: 3.2rem; }

/* ---- Minesweeper ---- */
.fg-ms-flagbtn { margin-bottom: .75rem; }
.fg-ms-grid {
  grid-template-columns: repeat(9, 1fr);
  gap: 2px;
  width: min(100%, 22rem);
  aspect-ratio: 1;
}
.fg-ms-cell {
  border: 0;
  padding: 0;
  border-radius: 3px;
  background: #c4b5fd;
  font-size: clamp(.7rem, 3vw, 1rem);
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  touch-action: manipulation;
}
.fg-ms-cell.is-revealed { background: #f1f5f9; }
.fg-ms-cell.is-flag { background: #fde68a; }
.fg-ms-cell.is-mine { background: #ef4444; }
.fg-ms-n1 { color: #2563eb; }
.fg-ms-n2 { color: #16a34a; }
.fg-ms-n3 { color: #dc2626; }
.fg-ms-n4 { color: #7c3aed; }
.fg-ms-n5 { color: #b45309; }
.fg-ms-n6 { color: #0891b2; }
.fg-ms-n7 { color: #1e293b; }
.fg-ms-n8 { color: #64748b; }

/* ---- 2048 ---- */
.fg-2048 {
  position: relative;
  width: min(100%, 20rem);
  aspect-ratio: 1;
  margin: 0 auto .75rem;
  background: #bbada0;
  border-radius: .6rem;
  padding: 3%;
}
.fg-2048-grid, .fg-2048-tiles {
  position: absolute;
  inset: 3%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 3%;
}
.fg-2048-grid { background: rgba(255,255,255,.22); border-radius: .35rem; }
.fg-2048-tiles { background: transparent; pointer-events: none; }
.fg-2048-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .35rem;
  font-weight: 800;
  font-size: clamp(1rem, 5vw, 1.7rem);
  background: #eee4da;
  color: #776e65;
  transition: all .12s ease;
}
.fg-2048-v4 { background: #ede0c8; }
.fg-2048-v8 { background: #f2b179; color: #fff; }
.fg-2048-v16 { background: #f59563; color: #fff; }
.fg-2048-v32 { background: #f67c5f; color: #fff; }
.fg-2048-v64 { background: #f65e3b; color: #fff; }
.fg-2048-v128 { background: #edcf72; color: #fff; font-size: clamp(.9rem,4.5vw,1.5rem); }
.fg-2048-v256 { background: #edcc61; color: #fff; font-size: clamp(.9rem,4.5vw,1.5rem); }
.fg-2048-v512 { background: #edc850; color: #fff; font-size: clamp(.9rem,4.5vw,1.5rem); }
.fg-2048-v1024 { background: #edc53f; color: #fff; font-size: clamp(.75rem,3.8vw,1.25rem); }
.fg-2048-v2048 { background: #edc22e; color: #fff; font-size: clamp(.75rem,3.8vw,1.25rem); box-shadow: 0 0 1.25rem rgba(237,194,46,.8); }
.fg-2048-vsuper { background: #3c3a32; color: #fff; font-size: clamp(.7rem,3.5vw,1.1rem); }

/* ---- 方向按钮（2048 / maze 共用） ---- */
.fg-dpad {
  display: grid;
  grid-template-columns: repeat(3, 3.2rem);
  grid-template-rows: repeat(2, 3.2rem);
  gap: .35rem;
  justify-content: center;
}
.fg-dpad button {
  border: 0;
  border-radius: .5rem;
  background: #7c3aed;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
}
.fg-dpad [data-dir="up"] { grid-column: 2; }
.fg-dpad [data-dir="left"] { grid-column: 1; grid-row: 2; }
.fg-dpad [data-dir="down"] { grid-column: 2; grid-row: 2; }
.fg-dpad [data-dir="right"] { grid-column: 3; grid-row: 2; }

/* ---- Maze ---- */
.fg-maze {
  grid-template-columns: repeat(11, 1fr);
  gap: 1px;
  width: min(100%, 22rem);
  aspect-ratio: 1;
  background: #1e293b;
  padding: 1px;
  border-radius: .4rem;
}
.fg-mz-cell {
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fg-mz-cell.is-wall { background: #334155; }
.fg-mz-cell.is-goal::after { content: '🏁'; font-size: clamp(.6rem, 2.6vw, .9rem); }
.fg-mz-cell.is-player { background: #7c3aed; border-radius: 50%; margin: 18%; }

/* ---- Code Break ---- */
.fg-cb-history { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .75rem; }
.fg-cb-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  justify-content: center;
}
.fg-cb-dot {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e2e8f0;
  font-size: .8rem;
  color: #475569;
}
.fg-cb-red { background: #ef4444; }
.fg-cb-blue { background: #2563eb; }
.fg-cb-green { background: #16a34a; }
.fg-cb-yellow { background: #facc15; }
.fg-cb-purple { background: #a855f7; }
.fg-cb-orange { background: #f97316; }
.fg-cb-pegs { white-space: nowrap; font-size: 1.1rem; min-width: 4rem; text-align: left; }
.fg-cb-current { display: flex; gap: .5rem; justify-content: center; margin-bottom: .75rem; }
.fg-cb-palette { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-bottom: .75rem; }
.fg-cb-swatch {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.15);
  cursor: pointer;
}
.fg-cb-actions { display: flex; gap: .5rem; justify-content: center; }

/* ---- Hangman ---- */
.fg-hm-figure {
  font-family: monospace;
  font-size: clamp(.8rem, 4vw, 1.1rem);
  line-height: 1.25;
  margin: 0 auto .5rem;
  white-space: pre;
  color: #1e293b;
}
.fg-hm-word {
  font-size: clamp(1.2rem, 6vw, 1.9rem);
  font-weight: 800;
  letter-spacing: .3em;
  margin: .25rem 0 1rem;
}
.fg-hm-keyboard {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .3rem;
  max-width: 26rem;
  margin: 0 auto;
}
.fg-hm-key {
  padding: .6rem 0;
  border: 0;
  border-radius: .35rem;
  background: #7c3aed;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}
.fg-hm-key:disabled { background: #cbd5e1; cursor: default; }

/* ---- Trivia ---- */
.fg-tv-card { max-width: 32rem; margin: 0 auto; }
.fg-tv-question { font-size: 1.15rem; margin: .25rem 0 1rem; }
.fg-tv-options { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.fg-tv-option {
  text-align: left;
  white-space: normal;
}
.fg-tv-option.is-correct { background: #16a34a; color: #fff; border-color: #16a34a; }
.fg-tv-option.is-wrong { background: #dc2626; color: #fff; border-color: #dc2626; }

/* ---- Word Search ---- */
.fg-ws-words {
  list-style: none;
  margin: 0 auto .75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  justify-content: center;
  max-width: 26rem;
  font-weight: 700;
  font-size: .9rem;
}
.fg-ws-words li { letter-spacing: .05em; }
.fg-ws-words li.is-found { text-decoration: line-through; color: #16a34a; }
.fg-ws-theme { flex-basis: 100%; color: #6d28d9; list-style: none; }
.fg-ws-grid {
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  width: min(100%, 24rem);
  aspect-ratio: 1;
  touch-action: none;
}
.fg-ws-cell {
  border: 0;
  padding: 0;
  border-radius: 3px;
  background: #f1e8ff;
  font-size: clamp(.6rem, 3vw, 1rem);
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.fg-ws-cell.is-preview { background: #c4b5fd; }
.fg-ws-cell.is-found { background: #16a34a; color: #fff; }

/* ---- Link Four ---- */
.fg-lf-solved { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .75rem; }
.fg-lf-group {
  border-radius: .5rem;
  padding: .45rem .6rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  font-size: .9rem;
}
.fg-lf-group span { font-weight: 600; }
.fg-lf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .45rem;
  margin-bottom: .75rem;
}
.fg-lf-tile {
  padding: .5rem .25rem;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  white-space: normal;
}
.fg-lf-tile.is-selected { background: #7c3aed; color: #fff; border-color: #7c3aed; }
.fg-lf-actions { display: flex; gap: .5rem; justify-content: center; }

/* ---- Emoji Guess ---- */
.fg-eg-clues {
  font-size: clamp(2.4rem, 10vw, 3.6rem);
  margin: .5rem 0;
  letter-spacing: .1em;
}

/* ---- Memory Sequence ---- */
.fg-msq-pads {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  width: min(100%, 18rem);
  margin: 0 auto 1rem;
}
.fg-msq-pad {
  aspect-ratio: 1;
  border: 0;
  border-radius: .9rem;
  cursor: pointer;
  opacity: .55;
  transition: opacity .15s;
}
.fg-msq-pad.is-on { opacity: 1; box-shadow: 0 0 1.5rem currentColor; }
.fg-msq-0 { background: #16a34a; color: #16a34a; }
.fg-msq-1 { background: #dc2626; color: #dc2626; }
.fg-msq-2 { background: #facc15; color: #facc15; }
.fg-msq-3 { background: #2563eb; color: #2563eb; }

/* ---- Nonogram ---- */
.fg-no-tools { display: flex; gap: .5rem; justify-content: center; margin-bottom: .75rem; }
.fg-nonogram {
  display: grid;
  grid-template-columns: 2.2rem repeat(5, 1fr);
  grid-template-rows: 2.2rem repeat(5, 1fr);
  gap: 2px;
  width: min(100%, 20rem);
  margin: 0 auto;
}
.fg-no-clue {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  color: #475569;
  text-align: center;
}
.fg-no-clue-col { flex-direction: column; line-height: 1.05; }
.fg-no-corner { background: transparent; }
.fg-no-cell {
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  background: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  color: #7c3aed;
  cursor: pointer;
  aspect-ratio: 1;
}
.fg-no-cell.state-1 { background: #1e293b; }
.fg-no-cell.state-2 { color: #ef4444; }

/* ---- Twenty-Four ---- */
.fg-tf-cards {
  font-size: clamp(1.4rem, 6vw, 2rem);
  font-weight: 800;
  letter-spacing: .2em;
  color: #6d28d9;
  margin: .25rem 0 .75rem;
}
.fg-tf-pad {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
  margin: .5rem auto 0;
  max-width: 22rem;
}
.fg-tf-key { min-width: 2.6rem; padding: .55rem 0; font-weight: 700; }
.fg-tf-num { background: #7c3aed; color: #fff; border-color: #7c3aed; }
.fg-tf-solution { font-weight: 700; color: #6d28d9; }

/* ---- Odd One Out ---- */
.fg-oo-board { gap: 3px; width: min(100%, 22rem); }
.fg-oo-7 { width: min(100%, 24rem); }
.fg-oo-8 { width: min(100%, 26rem); }
.fg-oo-cell {
  border: 0;
  background: transparent;
  font-size: clamp(1rem, 4.5vw, 1.8rem);
  cursor: pointer;
  border-radius: .35rem;
  aspect-ratio: 1;
  padding: 0;
}
.fg-oo-cell.is-found { background: #bbf7d0; }
.fg-oo-cell.is-wrong { background: #fecaca; }