/* A shared, compact play surface for the five Yearly mini games. */
.game-ui {
  --paper: #f8f4e9;
  --ink: #32452f;
  --muted: #827f6d;
  --line: #ded5bf;
  --moss: #526c48;
  color: var(--ink);
  background:
    radial-gradient(ellipse 68% 35% at 50% -4%, #ede7d2 0%, transparent 76%),
    linear-gradient(180deg, #faf7ef 0%, #f5f1e5 100%);
}
.game-ui .page { max-width: 1250px; padding-inline: clamp(18px, 4vw, 56px); }
.game-ui .site-header { height: 78px; border-color: #ddd7c8; }
.game-ui .home-brand { gap: 9px; color: #32452f; font-weight: 700; }
.game-ui .home-brand small { color: #8d947e; }
.game-ui .brand-symbol { background: linear-gradient(145deg, #6b8058, #3e563b); box-shadow: inset 0 1px #ffffff5c, 0 4px 10px #2e423025; }
.game-ui .back-link { border: 1px solid var(--line); border-radius: 100px; min-height: 38px; padding: 7px 14px; background: #fffaf0a8; color: #485d42; }
.game-ui .back-link:hover { background: #eef1e6; text-decoration: none; }
.game-ui .intro { padding: 24px 0 26px; text-align: center; }
.game-ui .eyebrow { color: #a1987e; font-size: 9px; letter-spacing: .23em; }
.game-ui .intro h1 { margin: 7px 0 4px; color: #354a35; font-family: "Songti SC","STSong","Noto Serif CJK SC",serif; font-size: clamp(32px, 4vw, 43px); font-weight: 700; letter-spacing: .12em; line-height: 1.25; }
.game-ui .intro h1 span { color: inherit; }
.game-ui .intro p { color: #7e846f; font-size: 12px; line-height: 1.55; }
.game-ui .game-layout { width: min(100%, 1120px); grid-template-columns: minmax(0, 660px) minmax(260px, 350px); gap: clamp(24px, 3vw, 38px); margin: 0 auto; }
.game-ui .board-card { min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.game-ui .board-topline { min-height: 31px; margin: 0 2px 11px; color: #627158; font-size: 12px; font-weight: 700; }
.game-ui .board-topline span:last-child { padding: 5px 11px; border: 1px solid #ded9c8; border-radius: 100px; background: #fffaf0b8; color: #767d68; font-size: 11px; }
.game-ui .board-hint { margin: 12px 0 0; color: #838874; font-size: 11px; }
.game-ui .game-sidebar { gap: 14px; }
.game-ui .panel { padding: 20px; border: 1px solid #e1d9c8; border-radius: 19px; background: #fffcf5c9; box-shadow: 0 9px 24px #5e513c0b; }
.game-ui .panel-label { color: #9b967d; font-size: 10px; letter-spacing: .14em; }
.game-ui .panel h2 { margin: 8px 0 15px; color: #354535; font-family: "Songti SC","STSong",serif; font-size: 19px; font-weight: 700; }
.game-ui .game-status { position: relative; min-height: 48px; height: auto; margin: 14px 0; padding: 10px 13px 10px 32px; border: 1px solid #e7e9d8; border-radius: 12px; background: #f1f3e9; color: #51664b; font-size: 12px; font-weight: 600; }
.game-ui .game-status::before { content: ""; position: absolute; top: 50%; left: 13px; width: 8px; height: 8px; border-radius: 50%; background: #81946c; box-shadow: 0 0 0 3px #81946c25; transform: translateY(-50%); }
.game-ui .game-status.finished { border-color: #edd5ba; background: #fbede0; color: #9d603b; }
.game-ui .game-status.finished::before { background: #c58a58; box-shadow: 0 0 0 3px #c58a5826; }
.game-ui .little-note { color: #969786; }
.game-ui footer { padding-top: 27px; color: #a5a99b; }
.game-ui .primary-button,
.game-ui .actions button:last-child,
.game-ui .xiangqi-actions .primary-button,
.game-ui .jump-actions .primary-button {
  min-height: 46px;
  border: 1px solid #496442;
  border-radius: 13px;
  background: linear-gradient(145deg, #607a53, #405d3d);
  box-shadow: inset 0 1px #ffffff40, 0 4px 8px #374f3224;
  color: #fffdf4;
  font-size: 13px;
  font-weight: 700;
}
.game-ui .actions button:first-child,
.game-ui .xiangqi-actions button:first-child,
.game-ui .jump-actions button:first-child {
  min-height: 46px;
  border: 1px solid #d6cbb6;
  border-radius: 13px;
  background: #fffaf0;
  color: #53684e;
  font-size: 13px;
}
.game-ui button:disabled { opacity: .48; cursor: default; }
.game-ui .mode-button,
.game-ui .size-switch button { border-color: #e1dbc9; border-radius: 13px; background: #fcfaf4; }
.game-ui .mode-button.active,
.game-ui .size-switch button.active { border-color: #8da482; background: #eaf0e4; box-shadow: inset 3px 0 #68855d; }
.game-ui .player,
.game-ui .xiangqi-player,
.game-ui .jump-player { border-color: #e3ddce; border-radius: 13px; background: #fffcf6; }
.game-ui .player.active,
.game-ui .xiangqi-player.active,
.game-ui .jump-player.active { border-color: #a2b396; background: #edf2e8; opacity: 1; box-shadow: 0 0 0 2px #a2b39625; }

/* Chess boards keep their original interactive grids and geometry. */
.game-gomoku .board,
.game-xiangqi .xiangqi-board {
  border: 8px solid #a77342;
  border-radius: 19px;
  background:
    repeating-linear-gradient(92deg, #ffffff10 0 2px, #9d66300b 3px 5px, transparent 6px 38px),
    linear-gradient(125deg, #efcf97 0%, #e8bf81 48%, #dfad6f 100%);
  box-shadow: inset 0 0 0 2px #d9a96c, inset 0 3px 15px #63411c22, 0 3px 0 #8f6239, 0 12px 22px #614b2a30;
}
.game-gomoku .cell::before,
.game-gomoku .cell::after { background: #87633f; }
.game-gomoku .stone { inset: 8%; }
.game-gomoku .cell.black .stone,
.game-gomoku .piece.black { background: radial-gradient(circle at 32% 23%, #6b756e, #26322b 61%, #101a13); box-shadow: inset -2px -3px 5px #0008, 0 2px 5px #42311e7d; }
.game-gomoku .cell.white .stone,
.game-gomoku .piece.white { background: radial-gradient(circle at 28% 22%, #fffef9, #eee9db 65%, #c7bdab); box-shadow: inset -2px -3px 5px #857f7090, 0 2px 5px #42311e65; }
.game-gomoku .cell:not(.occupied):hover { background: #fff7dc6b; }
.game-gomoku .player .piece { width: 27px; height: 27px; }
.game-xiangqi .xiangqi-lines path { stroke: #7b5837; stroke-width: 1.65; }
.game-xiangqi .river-label { color: #755232; text-shadow: 0 1px #f9dfb1; }
.game-xiangqi .xiangqi-piece,
.game-xiangqi .xiangqi-mini-piece {
  border: 1px solid #a8733f;
  background: radial-gradient(circle at 34% 22%, #fffbec, #efdbb8 72%, #cfaa74);
  box-shadow: inset 0 0 0 2px #fff9e8, inset 0 0 0 4px #c0935b, inset 0 -2px 4px #a2743b61, 0 2px 4px #573e256e;
}
.game-xiangqi .xiangqi-piece { width: 85%; font-size: clamp(21px, 5.2vw, 36px); font-weight: 900; text-shadow: 0 .5px currentColor; }
.game-xiangqi .xiangqi-piece.red,
.game-xiangqi .xiangqi-mini-piece.red { color: #a8302b; }
.game-xiangqi .xiangqi-piece.black,
.game-xiangqi .xiangqi-mini-piece.black { color: #253a31; }
.game-xiangqi .xiangqi-cell.legal::after { width: 21%; background: #72935b; box-shadow: 0 0 0 5px #e6efcfaf; }
.game-xiangqi .xiangqi-cell.capture::after,
.game-xiangqi .xiangqi-cell.selected::before { border-color: #6b8c58; }

/* A cut-out star replaces the rectangular Chinese checkers tray. */
.game-jump .game-layout { grid-template-areas: "board setup" "board side"; grid-template-rows: min-content 1fr; row-gap: 14px; }
.game-jump .board-card { grid-area: board; }
.game-jump .jump-setup { grid-area: setup; }
.game-jump .game-sidebar { grid-area: side; }
.game-jump .jump-board { position: relative; overflow: visible; border: 0; background: transparent; box-shadow: none; }
.game-jump .jump-board::before {
  content: "";
  position: absolute;
  inset: -3%;
  z-index: 0;
  clip-path: polygon(50% 0%, 64% 25%, 99% 25%, 81% 50%, 99% 75%, 64% 75%, 50% 100%, 36% 75%, 1% 75%, 19% 50%, 1% 25%, 36% 25%);
  background: linear-gradient(120deg, #a36c3c, #7d4b2a 65%, #5e361f);
  filter: drop-shadow(0 7px 7px #68492757);
}
.game-jump .jump-board::after {
  content: "";
  position: absolute;
  inset: -3%;
  z-index: 1;
  clip-path: polygon(50% 2%, 64% 26%, 96% 27%, 81% 50%, 96% 73%, 64% 74%, 50% 98%, 36% 74%, 4% 73%, 19% 50%, 4% 27%, 36% 26%);
  background:
    repeating-linear-gradient(100deg, #ffffff11 0 3px, transparent 4px 28px, #7e4c250c 29px 31px),
    linear-gradient(120deg, #e0b577, #c99455 50%, #b77942);
  pointer-events: none;
}
.game-jump .jump-hole {
  width: 6.05%;
  border: 1px solid #85552d;
  background: radial-gradient(circle at 46% 38%, #80502d, #b37a43 65%, #dcab68);
  box-shadow: inset 0 2px 5px #45250b94, 0 1px 0 #ffe1aa, 0 0 0 2px var(--camp-color, #ebcb9e);
}
.game-jump .jump-hole.occupied {
  border-color: var(--marble);
  background: radial-gradient(circle at 29% 22%, #ffffffad 0%, var(--marble-light) 16%, var(--marble) 61%, var(--marble-edge) 100%);
  box-shadow: inset -3px -4px 5px #17221766, inset 1px 2px 3px #ffffff45, 0 3px 5px #392a1e8a;
}
.game-jump .jump-hole.selected { outline: 3px solid #ecf3d5; outline-offset: 2px; box-shadow: 0 0 0 4px #607c4d, 0 3px 8px #38241793; }
.game-jump .jump-hole.target { border-color: #d8e6bd; background: #c8df9a; box-shadow: 0 0 0 3px #f4f7d9c9, inset 0 1px 3px #45653b7a; }
.game-jump .jump-hole.target::after { background: #527e45; }
.game-jump .jump-hole.last:not(.selected) { outline-color: #f3d6a0; }
.game-jump .jump-count-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 4px; border: 1px solid #e0d6c2; border-radius: 100px; background: #f3ecdc; }
.game-jump .jump-count-options button { min-height: 40px; padding: 6px 3px; border: 0; border-radius: 100px; background: transparent; color: #797c6a; font-size: 13px; font-weight: 700; text-align: center; }
.game-jump .jump-count-options button small { display: none; }
.game-jump .jump-count-options button.active { background: #516b47; color: #fff; box-shadow: 0 2px 5px #3b503436; }
.game-jump .jump-player-dot { background: radial-gradient(circle at 30% 22%, #ffffffad 0%, var(--dot-light) 16%, var(--dot) 61%, var(--dot-edge) 100%); box-shadow: inset -3px -4px 5px #14201560, inset 1px 2px 3px #ffffff76, 0 2px 4px #302a2052; }

/* Soft numeric tiles share the same tactile palette. */
.game-2048 .number-board,
.game-puzzle .puzzle-board {
  padding: 11px;
  gap: 9px;
  border: 8px solid #a77a4f;
  border-radius: 20px;
  background: linear-gradient(135deg, #ba9671, #a67b55);
  box-shadow: inset 0 2px 9px #5037196d, 0 3px 0 #876441, 0 11px 21px #614b2a2d;
}
.game-2048 .number-cell {
  border-radius: 12px;
  background: #cbb190;
  box-shadow: inset 0 2px 3px #69513324;
  color: #5e5c4c;
  font-size: clamp(28px, 5vw, 45px);
  font-weight: 800;
  transition: background-color .18s, color .18s;
}
.game-2048 .number-cell[data-value="2"] { background: #f7eedc; color: #52614a; box-shadow: inset 0 2px #fff9ef, 0 3px 4px #5a43252d; }
.game-2048 .number-cell[data-value="4"] { background: #e6edd7; color: #53694d; box-shadow: inset 0 2px #ffffff9c, 0 3px 4px #5a43252d; }
.game-2048 .number-cell[data-value="8"] { background: #eac489; color: #6e4e34; }
.game-2048 .number-cell[data-value="16"] { background: #deaa75; color: #fffaf1; }
.game-2048 .number-cell[data-value="32"] { background: #d89372; color: #fffaf1; }
.game-2048 .number-cell[data-value="64"] { background: #c8755f; color: #fffaf1; }
.game-2048 .number-cell[data-value="128"],
.game-2048 .number-cell[data-value="256"],
.game-2048 .number-cell[data-value="512"] { background: #95a977; color: #fffef5; }
.game-2048 .number-cell[data-value="1024"],
.game-2048 .number-cell[data-value="2048"] { background: #567c5b; color: #fffef5; box-shadow: inset 0 2px #ffffff42, 0 0 0 2px #d6e3a0; }
.game-2048 .number-cell[data-value="4096"],
.game-2048 .number-cell[data-value="8192"] { background: #355d49; color: #fffef5; }
.game-ui .score-row > div { border: 1px solid #e2dac8; border-radius: 13px; background: #f8f3e8; }
.game-ui .score-row strong { color: #476241; }
.game-puzzle .puzzle-tile {
  border: 1px solid #e5cda8;
  border-radius: 13px;
  background: linear-gradient(145deg, #fffaf0, #efe1c7);
  box-shadow: inset 0 2px #ffffffb8, 0 4px 0 #8c6946, 0 5px 5px #5a432540;
  color: #4a6249;
  font-family: Georgia,"Times New Roman",serif;
  font-weight: 700;
}
.game-puzzle .puzzle-tile.movable { border-color: #739467; background: linear-gradient(145deg, #f2f6e9, #dce8d1); color: #3b6343; box-shadow: inset 0 2px #ffffffbd, 0 4px 0 #739067, 0 0 0 2px #e0eecb; }
.game-puzzle .puzzle-tile.empty { border: 1px dashed #f6dfb56e; background: #805e3d6b; box-shadow: inset 0 3px 8px #422a186b; }
.game-puzzle .puzzle-tile:disabled { opacity: 1; }
.game-puzzle .puzzle-tile:not(:disabled):active { transform: translateY(3px); box-shadow: inset 0 1px #fff9, 0 1px 0 #739067; }
.game-puzzle .size-switch button { min-height: 58px; }

@media (max-width: 920px) {
  .game-ui .game-layout { grid-template-columns: minmax(0, 660px); gap: 18px; }
  .game-jump .game-layout { grid-template-areas: "setup" "board" "side"; grid-template-rows: auto; }
}
@media (max-width: 640px) {
  .game-ui .page { padding-inline: 16px; }
  .game-ui .site-header { height: 64px; }
  .game-ui .home-brand { font-size: 20px; }
  .game-ui .brand-symbol { width: 34px; height: 34px; font-size: 25px; }
  .game-ui .back-link { min-height: 34px; padding: 6px 10px; font-size: 11px; }
  .game-ui .intro { padding: 15px 0 16px; }
  .game-ui .intro h1 { margin: 5px 0 3px; font-size: 34px; }
  .game-ui .intro p { font-size: 11px; }
  .game-ui .game-layout { gap: 15px; }
  .game-ui .board-topline { margin-bottom: 9px; }
  .game-ui .board-hint { font-size: 10px; }
  .game-ui .panel { padding: 16px; }
  .game-ui .panel h2 { margin-bottom: 12px; font-size: 17px; }
  .game-ui .game-status { min-height: 46px; margin: 12px 0; }
  .game-gomoku .board,
  .game-xiangqi .xiangqi-board,
  .game-2048 .number-board,
  .game-puzzle .puzzle-board { border-width: 6px; border-radius: 16px; }
  .game-gomoku .board { padding: 4px; }
  .game-xiangqi .xiangqi-piece { width: 87%; font-size: clamp(20px, 5.8vw, 29px); }
  .game-jump .jump-hole { width: 6%; }
  .game-jump .jump-setup { padding: 13px 14px; }
  .game-jump .jump-setup .panel-label,
  .game-jump .jump-setup h2 { display: none; }
  .game-2048 .number-board,
  .game-puzzle .puzzle-board { padding: 8px; gap: 7px; }
  .game-puzzle .puzzle-tile { border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .game-ui .number-cell,
  .game-ui .puzzle-tile { transition: none; }
}