.ag-goal { align-self:center; color:#647168; font-size:13px; }
.ag-board { width:100%; max-width:448px; margin:auto; user-select:none; outline-offset:5px; }
.ag-board.is-paused { visibility:hidden; }
.ag-2048, .ag-snake { touch-action:none; }
.ag-board-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.ag-2048 { position:relative; padding:9px; border-radius:12px; background:#c3d0b7; }
.ag-2048 .ag-board-row { gap:9px; margin-bottom:9px; }
.ag-2048 .ag-board-row:nth-child(4) { margin-bottom:0; }
.ag-tile { display:grid; place-items:center; aspect-ratio:1; min-width:0; border-radius:7px; background:#dce5d2; color:#344b35; font:700 clamp(25px,4vw,46px)/1 system-ui,sans-serif; font-variant-numeric:tabular-nums; }
.ag-tile[data-power="1"] { background:#f8faef; }
.ag-tile[data-power="2"] { background:#edf2d3; }
.ag-tile[data-power="3"] { background:#dae7b8; }
.ag-tile[data-power="4"] { background:#bad392; }
.ag-tile[data-power="5"] { background:#91b674; }
.ag-tile[data-power="6"] { background:#678d4f; color:#fff; }
.ag-tile[data-power="7"] { background:#4c743e; color:#fff; font-size:clamp(23px,3.5vw,40px); }
.ag-tile[data-power="8"] { background:#355b46; color:#fff; font-size:clamp(23px,3.5vw,40px); }
.ag-tile[data-power="9"] { background:#284739; color:#fff; font-size:clamp(23px,3.5vw,40px); }
.ag-tile[data-power="10"], .ag-tile[data-power="11"] { background:#ab7a37; color:#fff; font-size:clamp(20px,3vw,34px); }
.ag-tile[data-extended="true"] { background:#594b64; color:#fff; font-size:clamp(19px,3vw,32px); }
.ag-tile[data-power="12"] { background:#78643c; }
.ag-tile[data-power="13"] { background:#46646b; }
.ag-tile[data-digits="5"] { font-size:clamp(14px,3vw,28px); }
.ag-tile[data-digits="6"] { font-size:clamp(12px,2.5vw,23px); }
#ag-continue:not([hidden]) + #ag-retry { margin-top:10px; }
.ag-motion-layer { position:absolute; inset:0; z-index:2; pointer-events:none; }
.ag-moving-tile { position:absolute; will-change:transform; }
.ag-2048.is-moving > .ag-board-row > .ag-tile { background:#dce5d2; color:transparent; }
.ag-snake { display:grid; grid-template-columns:repeat(16,minmax(0,1fr)); aspect-ratio:1; padding:5px; gap:1px; border:1px solid #c3d1b7; background:#e4ecd9; border-radius:9px; }
.ag-snake-cell { min-width:0; aspect-ratio:1; border-radius:3px; background:#f2f6e9; }
.ag-snake-cell.is-body { background:#87a86b; }
.ag-snake-cell.is-head { position:relative; background:#345b43; }
.ag-snake-cell.is-head::after { content:""; position:absolute; inset:27%; border:2px solid #f6f9ed; border-radius:50%; }
.ag-snake-cell.is-food { background:#c88a40; border-radius:50%; box-shadow:inset 0 0 0 3px #f5dfb6; }
.ag-snake.is-lost .is-head { background:#aa513c; }
.ag-memory-match { touch-action:manipulation; }
.ag-memory-match .ag-board-row { gap:10px; margin-bottom:10px; }
.ag-memory-match .ag-board-row:last-child { margin-bottom:0; }
.ag-card { position:relative; display:grid; place-items:center; width:100%; min-width:0; aspect-ratio:1; padding:0; border:1px solid #a6bb95; border-radius:9px; background:#355b46; color:#e8efdd; font:600 clamp(25px,4vw,45px)/1 system-ui,sans-serif; cursor:pointer; box-shadow:0 3px 0 #274433; }
.ag-card::before { content:""; position:absolute; inset:6px; border:1px solid #b6caa53d; border-radius:5px; pointer-events:none; }
.ag-card.is-open { color:#355b46; background:#fafcf4; border-color:#a6bb95; box-shadow:0 3px 0 #d2ddc8; }
.ag-card.is-matched { color:#536d40; background:#dfebcd; box-shadow:none; border-color:#c1d4ae; }
.ag-card[aria-disabled="true"] { cursor:default; }
.ag-card:not([aria-disabled="true"]):hover { filter:brightness(1.08); }
.ag-card:focus-visible { z-index:1; outline:3px solid #bc8e44; outline-offset:2px; }
.ag-direction-pad { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; max-width:240px; margin:20px auto; }
.ag-direction-pad .cg-button { font-size:24px; min-height:48px; padding:6px; }
.ag-direction-pad .ag-up { grid-column:2; }
.ag-direction-pad .ag-up + button { grid-column:1; }
@media(max-width:540px) {
  .ag-workspace-2048 .cg-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .ag-workspace-2048 .cg-metric { flex-direction:column; align-items:flex-start; gap:6px; margin:0; }
  .ag-workspace-2048 .cg-metric span { word-break:keep-all; }
  .ag-workspace-2048 .cg-metric strong { font-size:clamp(16px,4.8vw,20px); }
  .ag-2048 { padding:6px; }
  .ag-2048 .ag-board-row { gap:6px; margin-bottom:6px; }
  .ag-tile { font-size:clamp(24px,8vw,34px); border-radius:5px; }
  .ag-memory-match .ag-board-row { gap:7px; margin-bottom:7px; }
  .ag-card { font-size:clamp(25px,8vw,36px); border-radius:6px; }
  .ag-snake { padding:3px; }
  .ag-snake-cell { border-radius:2px; }
  .ag-snake-cell.is-food { box-shadow:inset 0 0 0 2px #f5dfb6; }
}