/* ==========================================================================
   games.zzxcd.cn · 2048
   --------------------------------------------------------------------------
   世界：一枚印章落在米字格上。
   盘面是裸露的网格（槽位用细线画出来），数字块是实心方章 —— 值越大章越重，
   到 1024 以上整块翻成墨色，白字压在上面。所有落子只有位移与一次性盖章两种动效。
   ========================================================================== */

#gameView {
  display: grid;
  justify-items: center;
  gap: 0.7rem;
}

/* ---------- 对局横梁 ---------- */
.top {
  /* 整行压成内容宽度再居中：grid 的列是 1fr 时会占满整列，
     justify-content:center 无从生效（列本来就满）。
     用 max-content 让两列各自贴合内容，再 margin-inline:auto 居中。 */
  display: grid;
  grid-template-columns: auto max-content;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

/* 对局里不需要再露一次品牌图标（头部已经有一个），把宽度让给读数 */
.top .logo {
  display: none;
}

.scores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  align-content: center;
  gap: 0.5rem;
  min-width: 0;
}

/* 三个读数格与其它六页同一套：高 2rem、标签在左小字、数值在右等宽大字 */
.score-box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  height: 2rem;
  min-width: 0;
  padding: 0 0.55rem;
  border: var(--rule);
  background: var(--sheet);
}

.score-label {
  font-family: var(--font-mono);
  font-size: calc(0.58rem * var(--font-scale, 1));
  letter-spacing: 0.08em;
  opacity: 0.8;
  line-height: 1;
  flex: none;
}

.score-val {
  font-family: var(--font-mono);
  font-size: calc(0.95rem * var(--font-scale, 1));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* 首个计分格咬住强调色：一眼看出当前是哪个模式的读数 */
.score-box:first-child {
  background: var(--accent);
  color: var(--on-accent);
}

.sub {
  font-family: var(--font-mono);
  font-size: calc(0.74rem * var(--font-scale, 1));
  color: var(--ink-soft);
  text-align: center;
}

/* ---------- 盘面 ---------- */
/* 方形盘面按**短边**收敛：宽屏上给到 560 就够，别让它撑到要滚动 */
.board#board {
  position: relative;
  width: max(200px, min(100%, 560px, calc(100vh - 19rem)));
  aspect-ratio: 1;
  border: var(--rule);
  background: var(--sheet);
  box-shadow: var(--shadow);
  touch-action: none;
}

.slot {
  position: absolute;
  width: 25%;
  height: 25%;
  border-right: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
}

.tile {
  position: absolute;
  left: calc(var(--c) * 25%);
  top: calc(var(--r) * 25%);
  z-index: 2;
  width: 25%;
  height: 25%;
  padding: 0.26rem;
  transition: left var(--dur) var(--ease), top var(--dur) var(--ease);
}

.tile-inner {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border: var(--rule);
  background: var(--sheet);
  color: var(--ink);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
  text-align: center;
  overflow: hidden;
  min-width: 0;
}

/* 值越大，章越重：底色层层加深，到高位直接翻成墨色 */
.tile-inner.tv2,
.tile-inner.tv4 {
  background: color-mix(in srgb, var(--ink) 8%, var(--sheet));
}

.tile-inner.tv8,
.tile-inner.tv16 {
  background: color-mix(in srgb, var(--accent) 26%, var(--sheet));
}

.tile-inner.tv32,
.tile-inner.tv64 {
  background: color-mix(in srgb, var(--accent) 48%, var(--sheet));
}

.tile-inner.tv128,
.tile-inner.tv256 {
  background: var(--accent);
  color: var(--on-accent);
}

/* 512/1024 是"墨盖住强调色"，字色必须跟着纸走：暗色主题里 --ink 是浅色，
   这块混出来是浅粉，再写 var(--on-accent)（恒为白）就变成白字压浅粉 —— 实测 1.6:1。 */
.tile-inner.tv512,
.tile-inner.tv1024 {
  background: color-mix(in srgb, var(--ink) 74%, var(--accent));
  color: var(--sheet);
}

.tile-inner.tv2048,
.tile-inner.tv4096,
.tile-inner.tv8192,
.tile-inner.tv16384,
.tile-inner.tv32768,
.tile-inner.tv65536 {
  background: var(--ink);
  color: var(--sheet);
}

/* 军旗版：文字是"工兵/排长/…"，两个汉字。字号跟着格子走 —— 定死成小字
   （曾写 0.74rem）会让 128px 的格子里只剩 24px 宽的一小撮字。 */
.tile-inner.drank {
  font-size: var(--fit-drank, 0.9rem);
  letter-spacing: 0;
}

/* 位数决定字号（d1 = 1 位数 … d5 = 5 位数）。用 clamp 跟着格子走，
   盘面变大盘面字号跟着涨，不用改数字。 */
.tile-inner.d1 {
  font-size: var(--fit-d1, 1.6rem);
}

.tile-inner.d2 {
  font-size: var(--fit-d2, 1.2rem);
}

.tile-inner.d3 {
  font-size: var(--fit-d3, 0.95rem);
}

.tile-inner.d4 {
  font-size: var(--fit-d4, 0.75rem);
}

.tile-inner.d5 {
  font-size: var(--fit-d5, 0.62rem);
}

.tile.new .tile-inner {
  animation: st-2048-stamp var(--dur-slow) var(--ease-out);
}

.tile.merged .tile-inner {
  animation: st-2048-bite 200ms var(--ease);
}

@keyframes st-2048-stamp {
  from {
    transform: scale(0.55);
    background: var(--accent);
    color: var(--on-accent);
  }
}

@keyframes st-2048-bite {
  50% {
    transform: scale(1.09);
  }
}

.new-btn {
  width: max(200px, min(100%, 560px, calc(100vh - 19rem)));
  padding: 0.6rem 1rem;
  border: var(--rule);
  background: var(--ink);
  color: var(--sheet);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-mono);
  font-size: calc(0.82rem * var(--font-scale, 1));
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.new-btn:hover {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

/* ---------- 结算 ---------- */
.overlay-mask {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
}

.overlay-mask.open {
  display: grid;
  place-items: center;
  padding: 1rem;
  background: var(--scrim);
  min-width: 0;
}

.overlay-card {
  width: min(100%, 380px);
  padding: 1.4rem 1.3rem 1.2rem;
  border: var(--rule);
  background: var(--sheet);
  box-shadow: var(--shadow-lg);
  text-align: center;
  animation: st-2048-deal var(--dur-slow) var(--ease-out);
}

@keyframes st-2048-deal {
  from {
    transform: translateY(14px);
    opacity: 0;
  }
}

.overlay-emoji {
  font-size: calc(2.1rem * var(--font-scale, 1));
  line-height: 1;
}

.overlay-title {
  margin-top: 0.35rem;
  font-size: calc(1.3rem * var(--font-scale, 1));
  font-weight: 800;
  letter-spacing: -0.01em;
}

.overlay-text {
  margin-top: 0.45rem;
  font-family: var(--font-mono);
  font-size: calc(0.78rem * var(--font-scale, 1));
  line-height: 1.7;
  color: var(--ink-soft);
}

.result-btns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 1.1rem;
  min-width: 0;
}

.btn {
  padding: 0.52rem 0.8rem;
  border: var(--rule);
  background: var(--sheet);
  box-shadow: var(--shadow-sm);
  font-size: calc(0.86rem * var(--font-scale, 1));
  font-weight: 700;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.btn:hover {
  background: color-mix(in srgb, var(--ink) 8%, var(--sheet));
}

.btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
}

.btn.primary {
  background: var(--accent);
  color: var(--on-accent);
}

/* ---------- 断点 ---------- */
@media (max-width: 560px) {
  .top {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .top .logo {
    display: none;
  }

  .tile {
    padding: 0.18rem;
  }

  .tile-inner.d3 {
    font-size: calc(0.96rem * var(--font-scale, 1));
  }

}