/* 2048 board. Layout is shared; each skin supplies tile colors (--tN-bg / --tN-fg) and cell styling. */
.game { max-width: 460px; }
.game-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.score-box {
  position: relative; display: flex; flex-direction: column; min-width: 92px; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--subtle);
}
.score-box span { font-size: 11.5px; color: var(--muted); }
.score-box b { font-size: 20px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.score-pop {
  position: absolute; right: 10px; top: 6px; font-weight: 700; font-size: 13px; color: var(--good);
  animation: score-pop .65s ease-out forwards; pointer-events: none;
}
@keyframes score-pop { to { transform: translateY(-22px); opacity: 0; } }
.btn:disabled { opacity: .45; cursor: default; }

.board {
  --gap: 8px;
  position: relative; width: 100%; aspect-ratio: 1; padding: var(--gap);
  border-radius: var(--board-radius, 8px); background: var(--board-bg, var(--subtle));
  border: 1px solid var(--line); touch-action: none; user-select: none; -webkit-user-select: none;
}
.board:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.cells, .tiles {
  position: absolute; inset: var(--gap);
}
.cells { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: var(--gap); }
.cells i { border-radius: var(--tile-radius, 6px); background: var(--cell-bg, rgba(0, 0, 0, .05)); }
.tile {
  position: absolute; left: 0; top: 0;
  width: calc((100% - 3 * var(--gap)) / 4); height: calc((100% - 3 * var(--gap)) / 4);
  transform: translate(calc(var(--c) * (100% + var(--gap))), calc(var(--r) * (100% + var(--gap))));
  transition: transform .11s ease-in-out;
  display: grid; place-items: center; border-radius: var(--tile-radius, 6px);
  font: 700 clamp(20px, 7.5vw, 34px)/1 var(--font); font-variant-numeric: tabular-nums;
  background: var(--t-bg); color: var(--t-fg);
}
.tile.long { font-size: clamp(15px, 5.2vw, 25px); }
.tile.gone { z-index: 0; }
.tile.new { animation: tile-new .16s ease-out .06s backwards; }
.tile.merged { z-index: 2; animation: tile-merge .16s ease-out; }
@keyframes tile-new { from { transform: translate(calc(var(--c) * (100% + var(--gap))), calc(var(--r) * (100% + var(--gap)))) scale(.2); opacity: 0; } }
@keyframes tile-merge {
  50% { transform: translate(calc(var(--c) * (100% + var(--gap))), calc(var(--r) * (100% + var(--gap)))) scale(1.12); }
}

.game-msg {
  position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 24px; text-align: center; border-radius: inherit;
  background: var(--msg-bg, rgba(255, 255, 255, .86)); backdrop-filter: blur(2px);
  animation: menu-in .2s ease-out;
}
.game-msg-title { font-size: 22px; font-weight: 700; }
.game-msg-body { color: var(--muted); }
.game-msg-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.game .hint { margin-top: 10px; }
.legend { display: none; }
.keys { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 13px; color: var(--muted); }
.field-value { font-size: 13px; line-height: 1.55; }

/* tile value → color, through per-skin tokens */
.tile.v2 { --t-bg: var(--t2-bg); --t-fg: var(--t2-fg); }       .legend .v2 { background: var(--t2-bg); }
.tile.v4 { --t-bg: var(--t4-bg); --t-fg: var(--t4-fg); }
.tile.v8 { --t-bg: var(--t8-bg); --t-fg: var(--t8-fg); }       .legend .v8 { background: var(--t8-bg); }
.tile.v16 { --t-bg: var(--t16-bg); --t-fg: var(--t16-fg); }
.tile.v32 { --t-bg: var(--t32-bg); --t-fg: var(--t32-fg); }    .legend .v32 { background: var(--t32-bg); }
.tile.v64 { --t-bg: var(--t64-bg); --t-fg: var(--t64-fg); }
.tile.v128 { --t-bg: var(--t128-bg); --t-fg: var(--t128-fg); } .legend .v128 { background: var(--t128-bg); }
.tile.v256 { --t-bg: var(--t256-bg); --t-fg: var(--t256-fg); }
.tile.v512 { --t-bg: var(--t512-bg); --t-fg: var(--t512-fg); } .legend .v512 { background: var(--t512-bg); }
.tile.v1024 { --t-bg: var(--t1024-bg); --t-fg: var(--t1024-fg); }
.tile.v2048, .tile.vsuper { --t-bg: var(--t2048-bg); --t-fg: var(--t2048-fg); }

/* GitHub: contribution graph (tokens on .game so the Less–More legend can use them too) */
[data-skin="github"] .game {
  --board-bg: var(--bg); --cell-bg: #ebedf0; --tile-radius: 6px;
  --t2-bg: #9be9a8; --t2-fg: #0a3d1a; --t4-bg: #40c463; --t4-fg: #06290f; --t8-bg: #30a14e; --t8-fg: #fff;
  --t16-bg: #216e39; --t16-fg: #fff; --t32-bg: #0e4429; --t32-fg: #fff; --t64-bg: #0969da; --t64-fg: #fff;
  --t128-bg: #8250df; --t128-fg: #fff; --t256-bg: #bf3989; --t256-fg: #fff; --t512-bg: #bc4c00; --t512-fg: #fff;
  --t1024-bg: #cf222e; --t1024-fg: #fff; --t2048-bg: #1f2328; --t2048-fg: #fff;
}
[data-skin="github"] .legend { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: 8px; font-size: 12px; color: var(--muted); }
[data-skin="github"] .legend i { width: 10px; height: 10px; border-radius: 2px; outline: 1px solid rgba(27, 31, 36, .06); outline-offset: -1px; }
[data-skin="github"] .legend span:first-child { margin-right: 4px; }
[data-skin="github"] .legend span:last-child { margin-left: 4px; }
[data-skin="github"] .score-box b { font-weight: 600; }

/* Jira: status lozenges */
[data-skin="jira"] .board {
  --board-bg: var(--sunken); --cell-bg: rgba(9, 30, 66, .06); --tile-radius: 3px; border-radius: 6px;
  --t2-bg: #e9f2ff; --t2-fg: #0055cc; --t4-bg: #cce0ff; --t4-fg: #0055cc; --t8-bg: #85b8ff; --t8-fg: #09326c;
  --t16-bg: #579dff; --t16-fg: #fff; --t32-bg: #0c66e4; --t32-fg: #fff; --t64-bg: #dcfff1; --t64-fg: #216e4e;
  --t128-bg: #7ee2b8; --t128-fg: #164b35; --t256-bg: #22a06b; --t256-fg: #fff; --t512-bg: #f8e6a0; --t512-fg: #7f5f01;
  --t1024-bg: #e2b203; --t1024-fg: #533f04; --t2048-bg: #ae2e24; --t2048-fg: #fff;
}
[data-skin="jira"] .tile { box-shadow: 0 1px 1px rgba(9, 30, 66, .25), 0 0 1px rgba(9, 30, 66, .31); }
[data-skin="jira"] .score-box { border-radius: 3px; background: var(--bg); }

/* Figma: colored frames on the dark canvas */
[data-skin="figma"] .page-main { padding: 48px 40px; }
[data-skin="figma"] .game { --msg-bg: rgba(44, 44, 44, .9); }
[data-skin="figma"] .board {
  --board-bg: transparent; --cell-bg: transparent; --tile-radius: 2px; border: 0; border-radius: 0;
  outline: 1px solid rgba(255, 255, 255, .08);
  --t2-bg: #e6e6e6; --t2-fg: #1e1e1e; --t4-bg: #d9f0ff; --t4-fg: #0b3a5c; --t8-bg: #0d99ff; --t8-fg: #fff;
  --t16-bg: #9747ff; --t16-fg: #fff; --t32-bg: #f24822; --t32-fg: #fff; --t64-bg: #ffcd29; --t64-fg: #1e1e1e;
  --t128-bg: #14ae5c; --t128-fg: #fff; --t256-bg: #ff7262; --t256-fg: #fff; --t512-bg: #1abcfe; --t512-fg: #0b2533;
  --t1024-bg: #a259ff; --t1024-fg: #fff; --t2048-bg: #fff; --t2048-fg: #0d99ff;
}
[data-skin="figma"] .board { margin-top: 30px; }
[data-skin="figma"] .field-value, [data-skin="figma"] .keys { padding: 2px 16px; color: #e6e6e6; }
[data-skin="figma"] .cells i { outline: 1px dashed rgba(255, 255, 255, .14); outline-offset: -1px; }
[data-skin="figma"] .board::before { content: "Board 4×4"; position: absolute; left: 0; bottom: 100%; padding-bottom: 6px; font-size: 11px; color: var(--muted); }
[data-skin="figma"] .score-box { background: var(--panel); border-color: var(--line); border-radius: 2px; }
[data-skin="figma"] .btn:not(.primary) { background: var(--subtle); border-color: var(--line); color: #fff; }

/* Notion: tag colors */
[data-skin="notion"] .board {
  --board-bg: var(--bg); --cell-bg: rgba(55, 53, 47, .05); --tile-radius: 4px; border-color: var(--line);
  --t2-bg: #e3e2e0; --t2-fg: #32302c; --t4-bg: #eee0da; --t4-fg: #442a1e; --t8-bg: #fadec9; --t8-fg: #49290e;
  --t16-bg: #fdecc8; --t16-fg: #402c1b; --t32-bg: #dbeddb; --t32-fg: #1c3829; --t64-bg: #d3e5ef; --t64-fg: #183347;
  --t128-bg: #e8deee; --t128-fg: #412454; --t256-bg: #f5e0e9; --t256-fg: #4c2337; --t512-bg: #ffe2dd; --t512-fg: #5d1715;
  --t1024-bg: #37352f; --t1024-fg: #fff; --t2048-bg: #2383e2; --t2048-fg: #fff;
}
[data-skin="notion"] .tile { font-weight: 600; }
[data-skin="notion"] .score-box { background: var(--callout); border: 0; border-radius: 4px; }

@media (max-width: 800px) {
  [data-skin="figma"] .page-main { padding: 32px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .tile { transition: none; }
}