/* ------------------------- */
/*      game全局布局          */
/* ------------------------- */
@import "../game-common.css"; 

.game-wrapper{
  width:100%;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family: var(--match-font-sans);
}

.game-wrapper:fullscreen{
  background: var(--match-page-bg);
  width:100%;
  height:100vh;
}

.game-wrapper:fullscreen .top-bar,
.game-wrapper:fullscreen .bottom-bar{
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-radius: 0;
}

.game-wrapper:fullscreen .game-area{
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-radius: 0;
  flex: 1;
  height: auto;
  min-height: 0;
}

.game-wrapper:fullscreen .grid{
  height:100%;
  justify-content:center;
}

/* ===========================
   Match Game CSS
   所有颜色提取为变量
=========================== */

:root {
  --match-font-sans: "Segoe UI", Arial, Helvetica, sans-serif;
  --match-font-mono: "Courier New", Courier, monospace;

  --match-page-bg: var(--page-bg);

  --match-card-bg: #ffaec0;
  --match-card-border: 0;
  --match-card-shadow: none;
  --match-card-radius: 12px;
  --match-card-padding: 8px;

  --match-card-hover-scale: 1.05;
  --match-card-hover-brightness: 1.1;

  --match-card-pressed-scale: 0.92;
  --match-card-pressed-shadow: inset 0 4px 8px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.05);
  --match-card-pressed-brightness: 0.9;

  --match-overlay-bg-start: rgba(0, 0, 0, 0.55);
  --match-overlay-bg-end: rgba(0, 0, 0, 0.05);
  --match-overlay-bg: linear-gradient(to top, var(--match-overlay-bg-start), var(--match-overlay-bg-end));

  --match-image-text-color: #fff;
  --match-text-only-color: #111;
  --match-text-weight: 800;
}

/* -------------------------
   Grid & Row
------------------------- */
.grid {
  display: flex;
  flex-direction: column;
  gap: var(--match-grid-gap, 12px);
  margin: auto;
  align-items: center;
}

.grid .row {
  display: flex;
  justify-content: center;
  gap: var(--match-grid-gap, 12px);
  width: 100%;
}

/* =========================
   卡片容器
========================= */
.card-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--match-card-radius);
  background: var(--match-card-bg);
  border: var(--match-card-border);
  box-shadow: var(--match-card-shadow);
  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  transition: transform 0.2s ease, filter 0.2s ease;
  aspect-ratio: 1 / 1;
  width: var(--match-card-size, 120px);
  height: var(--match-card-size, 120px);
  padding: var(--match-card-padding);
  box-sizing: border-box;
}

/* Hover 效果 */
.card-container:not(.matched):hover {
  transform: scale(var(--match-card-hover-scale));
  filter: brightness(var(--match-card-hover-brightness));
}

/* 定义“下陷”状态的类 */
.card-container.pressed {
  transform: scale(var(--match-card-pressed-scale));
  box-shadow: var(--match-card-pressed-shadow);
  filter: brightness(var(--match-card-pressed-brightness));
}

/* 匹配成功状态 */
.card-container.matched {
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* -------------------------
   对号 & 错误提示覆盖图标
------------------------- */
.card-container .mark-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 10;

  transform: scale(0);
  opacity: 0;
  transition: transform 0.2s ease-out, opacity 0.2s;
}

.card-container .mark-img.show {
  transform: scale(1);
  opacity: 1;
}

/* -------------------------
   背景图片
------------------------- */
.card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* -------------------------
   Overlay 文本条（图文混排）
------------------------- */
.card-container.image-text .card-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 6px 8px;
  background: var(--match-overlay-bg);
  color: var(--match-image-text-color);
  text-align: center;
  z-index: 2;
  font-size: clamp(14px, 3vw, 20px);
  line-height: 1.2;
  font-family: var(--match-font-sans);
  font-weight: var(--match-text-weight);
}

/* -------------------------
   纯文字卡片
------------------------- */
.card-container.only-text {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
}

.card-container.only-text .card-overlay {
  position: static;
  background: none;
  color: var(--match-text-only-color);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(18px, 4vw, 32px);
  text-align: center;
  font-family: var(--match-font-sans);
  font-weight: var(--match-text-weight);
}

/* -------------------------
   单独图片卡片
------------------------- */
.card-container.only-image .card-overlay {
  display: none;
}

/* -------------------------
   图文混排状态字体颜色
------------------------- */
.card-container.image-text {
  color: var(--match-image-text-color);
}

/* timer 00:00:00 和00:00之间无跳动切换 */
#timer {
    font-family: var(--match-font-mono);
    display: inline-block;
    min-width: 4.5rem; /* 预留 MM:SS 的宽度 */
    text-align: left;
}

/* 防止mute切换时扭动 */
.icon span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}