:root{
  --gap: 10px;
  --cardRadius: 14px;
  --border: 2px solid #333;
  --bg: #f3f4f6;
  --panel: #ffffff;
  --shadow: 0 8px 20px rgba(0,0,0,.12);
  --btn: #007bff;
  --btnHover: #0b5ed7;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans TC", sans-serif;
  background: var(--bg);
  color:#111;
}

.topbar{
  position: sticky;
  top:0;
  z-index: 10000;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.1);
  padding: 10px 12px;
}

.home-link{
  display:inline-block;
  text-decoration:none;
  color:#0b5ed7;
  font-weight:700;
  margin-bottom: 8px;
}

.controls{
  display:flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items:center;
  margin-bottom: 10px;
}

.ctl{
  display:flex;
  gap: 8px;
  align-items:center;
  background:#fff;
  border: 1px solid rgba(0,0,0,.12);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 14px;
}

.ctl select{
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 10px;
  padding: 4px 8px;
}

.hud{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.hud-item{
  display:flex;
  align-items:center;
}

#health-bar{
  width: min(320px, 70vw);
  height: 18px;
  background: #ddd;
  border: var(--border);
  border-radius: 999px;
  overflow:hidden;
}

#health-inner{
  height:100%;
  width:100%;
  background: #e11d48;
  transition: width .25s linear;
}

#score{
  background:#fff;
  border: var(--border);
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
}

.hud-actions{
  margin-left: auto;
  display:flex;
  gap: 10px;
}

.btn{
  padding: 10px 14px;
  background: var(--btn);
  color:#fff;
  border:none;
  border-radius: 12px;
  cursor:pointer;
  font-weight: 800;
}

.btn:hover{ background: var(--btnHover); }

.btn.ghost{
  background: #fff;
  color:#111;
  border: 2px solid #111;
}

.btn.ghost:hover{
  background:#111;
  color:#fff;
}

.btn.dark{
  background:#111827;
}
.btn.dark:hover{
  background:#0f172a;
}

.wrap{
  padding: 14px 12px 22px;
}

.game-panel{
  max-width: 85%;
  margin: 0 auto;
  background: var(--panel);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 12px;
}

/* ✅ 手機/平板：Grid */
.game-grid{
  display:grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  align-items: stretch;
}

/* 卡片 */
.card{
  appearance: none;
  border: var(--border);
  border-radius: var(--cardRadius);
  background: #fff;
  padding: 10px 10px;
  min-height: 70px;
  cursor:pointer;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 4px;
  box-shadow: 0 2px 0 rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, opacity .25s ease;
  user-select:none;
  touch-action: manipulation;
  position: relative; /* 讓 z-index 生效 */
}

.card:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
}

.card .main{
  font-weight: 900;
  font-size: clamp(14px, 2.6vw, 20px);
  line-height: 1.1;
}

.card .sub{
  font-size: clamp(11px, 2.2vw, 13px);
  opacity: .75;
}

.card.selected{
  outline: 4px solid rgba(250, 204, 21, .85);
  transform: scale(1.03);
  z-index: 9999; /* ✅ 選取浮到最上 */
}

.card.matched{
  background: #bbf7d0;
  opacity: 0;
  pointer-events:none;
}

.card.wrong{
  background:#fecdd3;
}

.card:disabled{
  cursor:not-allowed;
}

/* 文字提示 */
.hint{
  margin: 10px 2px 0;
  color: rgba(0,0,0,.65);
  font-size: 13px;
}

/* Modal */
.modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 16px;
  z-index: 50;
}

.modal-card{
  width: min(720px, 96vw);
  background:#fff;
  border: 3px solid #333;
  border-radius: 18px;
  padding: 16px;
}

.modal-body{
  font-size: 16px;
  line-height: 1.6;
}

.modal-actions{
  margin-top: 12px;
  display:flex;
  justify-content:center;
  gap: 10px;
  flex-wrap: wrap;
}

/* 排行榜表格 */
.lb{
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 14px;
}
.lb th, .lb td{
  border: 1px solid rgba(0,0,0,.18);
  padding: 6px 8px;
  text-align: left;
}
.lb th{
  background: #f8fafc;
}

/* ====== 混合模式：桌機散落 ====== */
.game-grid.scatter{
  display: block;
  position: relative;
  min-height: 70vh;
}

/* scatter 模式下 absolute，允許重疊 */
.game-grid.scatter .card{
  position: absolute;
  width: clamp(96px, 10vw, 150px);
}

/* 小螢幕仍維持 grid */
@media (max-width: 899px){
  .game-grid.scatter{ display:grid; position: static; }
  .game-grid.scatter .card{ position: static; width: auto; }
}

/* 小螢幕 */
@media (max-width: 520px){
  .hud-actions{ margin-left: 0; width:100%; }
  .hud-actions .btn{ flex:1; }
  .game-panel{ padding: 10px; }
  .game-grid{ grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); }
  .card{ min-height: 62px; }
}