/* 三消堆叠 · Tile Triple —— 移动端优先，自适应桌面 */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  color: #f4f1e8;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.06) 0 8px, transparent 9px),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.05) 0 10px, transparent 11px),
    radial-gradient(circle at 60% 30%, rgba(255,255,255,.04) 0 6px, transparent 7px),
    linear-gradient(165deg, #1d2b53 0%, #16213e 45%, #0f1830 100%);
  background-attachment: fixed;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

#app {
  max-width: 520px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ---------- 屏幕切换 ---------- */
.screen { display: none; flex-direction: column; flex: 1; min-height: 0; }
.screen.active { display: flex; }

/* ---------- 通用按钮 ---------- */
.btn {
  display: block;
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 17px;
  font-weight: 600;
  color: #2b2118;
  background: linear-gradient(180deg, #fdf6e3, #e8dcc0);
  box-shadow: 0 4px 0 #b8a888, 0 6px 12px rgba(0,0,0,.35);
  cursor: pointer;
  transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #b8a888, 0 3px 6px rgba(0,0,0,.35); }
.btn.primary {
  color: #fff;
  background: linear-gradient(180deg, #ff9a3c, #f0701a);
  box-shadow: 0 4px 0 #b34d0e, 0 6px 12px rgba(0,0,0,.35);
}
.btn.primary:active { box-shadow: 0 1px 0 #b34d0e, 0 3px 6px rgba(0,0,0,.35); }
.btn.small { width: auto; flex: 1; padding: 10px 12px; font-size: 14px; }

/* ---------- 顶栏 ---------- */
.bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
}
.bar h2 { font-size: 19px; flex: 1; text-align: center; }
.spacer { width: 38px; }
.icon-btn {
  width: 38px; height: 38px;
  border: none; border-radius: 12px;
  font-size: 24px; line-height: 1;
  color: #f4f1e8;
  background: rgba(255,255,255,.12);
  cursor: pointer;
}
.icon-btn:active { background: rgba(255,255,255,.25); }
.hud-title { font-size: 17px; font-weight: 700; flex: 1; }
.hud-stats { display: flex; gap: 6px; }
.hud-pill {
  background: rgba(0,0,0,.35);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- 主菜单 ---------- */
#screen-menu { align-items: center; justify-content: center; padding: 24px; }
.menu-box { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 14px; text-align: center; }
.logo { height: 110px; position: relative; margin-bottom: 4px; }
.logo .mini-tile {
  position: absolute;
  width: 74px; height: 74px;
  left: 50%; top: 50%;
  border-radius: 16px;
  background: linear-gradient(160deg, #fffdf5, #efe3c8);
  box-shadow: 0 6px 14px rgba(0,0,0,.45), inset 0 -4px 0 rgba(0,0,0,.08);
  display: flex; align-items: center; justify-content: center;
}
.logo .mini-tile svg { width: 78%; height: 78%; }
.logo .mini-tile:nth-child(1) { transform: translate(-105%, -58%) rotate(-10deg); }
.logo .mini-tile:nth-child(2) { transform: translate(-50%, -72%) rotate(4deg); }
.logo .mini-tile:nth-child(3) { transform: translate(5%, -58%) rotate(12deg); }
h1 { font-size: 34px; letter-spacing: 6px; text-shadow: 0 3px 0 rgba(0,0,0,.35); }
.subtitle { font-size: 13px; opacity: .75; margin-top: -8px; margin-bottom: 8px; }
.daily-info { font-size: 13px; opacity: .8; min-height: 18px; margin-top: -6px; }
.menu-row { display: flex; gap: 10px; margin-top: 4px; }

/* ---------- 难度选择 ---------- */
.diff-list { padding: 8px 16px 20px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.diff-card {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 16px;
  cursor: pointer;
  transition: background .12s, transform .12s;
}
.diff-card:active { background: rgba(255,255,255,.18); transform: scale(.98); }
.diff-dot { width: 44px; height: 44px; border-radius: 12px; flex: none; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); }
.diff-card:nth-child(1) .diff-dot { background: #57c84d; }
.diff-card:nth-child(2) .diff-dot { background: #2f9be8; }
.diff-card:nth-child(3) .diff-dot { background: #f0701a; }
.diff-card:nth-child(4) .diff-dot { background: #d63c5f; }
.diff-meta { flex: 1; text-align: left; }
.diff-name { font-size: 17px; font-weight: 700; }
.diff-desc { font-size: 12px; opacity: .7; margin-top: 3px; }
.diff-stars { font-size: 16px; letter-spacing: 2px; white-space: nowrap; }
.diff-stars .on { color: #ffca28; text-shadow: 0 0 6px rgba(255,202,40,.6); }
.diff-stars .off { color: rgba(255,255,255,.22); }
.diff-best { display: block; font-size: 10px; opacity: .65; letter-spacing: 0; margin-top: 2px; text-align: right; }

/* ---------- 棋盘 ---------- */
#board-wrap {
  flex: 1; min-height: 0;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  margin: 2px 8px;
  border-radius: 18px;
  background: rgba(0,0,0,.18);
  box-shadow: inset 0 2px 10px rgba(0,0,0,.35);
}
#board { position: relative; }
.tile {
  position: absolute;
  border-radius: 16%;
  background: linear-gradient(160deg, #fffdf5 0%, #f4e9d0 70%, #e9dab8 100%);
  box-shadow: 0 4px 8px rgba(0,0,0,.42), inset 0 -3px 0 rgba(120,90,40,.18), inset 0 2px 0 rgba(255,255,255,.9);
  cursor: pointer;
  transition: filter .18s, transform .1s;
}
.tile svg { width: 76%; height: 76%; margin: 12%; display: block; pointer-events: none; }
.tile.blocked { filter: brightness(.42) saturate(.65); cursor: default; }
.tile:not(.blocked):active { transform: scale(1.07); }
.tile.flash { animation: flashKF .7s ease; }
.tile.pop-in { animation: popInKF .28s ease; }
@keyframes flashKF {
  0%, 100% { box-shadow: 0 4px 8px rgba(0,0,0,.42); }
  30%, 70% { box-shadow: 0 0 0 4px #ff5252, 0 0 18px 6px rgba(255,82,82,.75); transform: scale(1.06); }
}
@keyframes popInKF { 0% { transform: scale(.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
#board.shuffling .tile { animation: shuffleKF .32s ease; }
@keyframes shuffleKF { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg) scale(.9); } 100% { transform: rotateY(0); } }

/* ---------- 连击浮字 ---------- */
#combo-pop {
  position: absolute;
  left: 50%; bottom: 12px;
  transform: translateX(-50%);
  font-size: 26px; font-weight: 800;
  color: #ffd54a;
  text-shadow: 0 2px 0 #b8860b, 0 0 14px rgba(255,213,74,.8);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
#combo-pop.show { animation: comboKF .9s ease forwards; }
@keyframes comboKF {
  0% { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.6); }
  25% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.15); }
  70% { opacity: 1; transform: translateX(-50%) translateY(-8px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-22px) scale(1); }
}

/* ---------- 暂存区 ---------- */
#holding-row {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 4px 14px 2px;
}
#holding-row.show { display: flex; }
.holding-label { font-size: 11px; opacity: .65; line-height: 1.4; text-align: center; white-space: nowrap; }
.holding-label i { font-style: normal; opacity: .8; }
#holding { display: flex; gap: 6px; }
.hold-cell {
  width: 40px; height: 40px;
  border-radius: 9px;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.4);
  position: relative;
}
.hold-tile, .slot-tile {
  position: absolute; inset: 0;
  border-radius: 9px;
  background: linear-gradient(160deg, #fffdf5 0%, #f4e9d0 70%, #e9dab8 100%);
  box-shadow: 0 2px 5px rgba(0,0,0,.4), inset 0 -2px 0 rgba(120,90,40,.18);
  cursor: pointer;
}
.hold-tile svg, .slot-tile svg { width: 76%; height: 76%; margin: 12%; display: block; pointer-events: none; }
.hold-tile:active { transform: scale(1.08); }
.slot-tile { cursor: default; }
.slot-tile.popping, .hold-tile.popping { animation: popKF .3s ease forwards; }
@keyframes popKF {
  0% { transform: scale(1); opacity: 1; }
  40% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

/* ---------- 道具栏 ---------- */
#booster-row {
  display: flex; justify-content: center; gap: 12px;
  padding: 8px 14px 6px;
}
.booster {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 74px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  padding: 7px 10px 6px;
  color: #f4f1e8;
  background: rgba(255,255,255,.09);
  cursor: pointer;
  transition: background .12s, transform .1s;
}
.booster:active { transform: scale(.95); background: rgba(255,255,255,.2); }
.booster .b-icon { font-size: 20px; line-height: 1.1; }
.booster .b-name { font-size: 12px; }
.booster .b-count {
  position: absolute; top: -6px; right: -6px;
  min-width: 20px; height: 20px;
  border-radius: 999px;
  background: #ffca28; color: #4a3400;
  font-size: 12px; font-weight: 800; line-height: 20px;
  padding: 0 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,.4);
}
.booster.disabled { opacity: .38; }

/* ---------- 槽位栏 ---------- */
#slot-bar {
  display: flex; justify-content: center; gap: 5px;
  padding: 6px 10px calc(12px + env(safe-area-inset-bottom));
}
.slot-cell {
  width: min(12.4vw, 52px);
  aspect-ratio: 1;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.45);
  position: relative;
}
.slot-tile { border-radius: 10px; }
#slot-bar.shake { animation: shakeKF .5s ease; }
@keyframes shakeKF {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}

/* ---------- 飞行卡牌 ---------- */
.fly-tile {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  border-radius: 16%;
  background: linear-gradient(160deg, #fffdf5 0%, #f4e9d0 70%, #e9dab8 100%);
  box-shadow: 0 6px 14px rgba(0,0,0,.5);
  transition: transform .23s ease-in-out;
  will-change: transform;
}
.fly-tile svg { width: 76%; height: 76%; margin: 12%; display: block; }

/* ---------- 弹窗 ---------- */
.overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(8,12,26,.72);
  backdrop-filter: blur(3px);
  z-index: 500;
  align-items: center; justify-content: center;
  padding: 24px;
}
.overlay.open { display: flex; }
.panel {
  width: 100%; max-width: 340px;
  background: linear-gradient(170deg, #2a3a66, #1c2a4d);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  padding: 24px 20px;
  display: flex; flex-direction: column; gap: 12px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
  animation: panelIn .25s ease;
  max-height: 86vh;
  overflow-y: auto;
}
@keyframes panelIn { 0% { transform: scale(.8) translateY(20px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.panel h2 { font-size: 22px; letter-spacing: 2px; }
.stars-big { font-size: 44px; letter-spacing: 8px; height: 58px; }
.stars-big .on { color: #ffca28; text-shadow: 0 0 16px rgba(255,202,40,.8); display: inline-block; animation: starPopKF .45s ease backwards; }
.stars-big .on:nth-child(2) { animation-delay: .15s; }
.stars-big .on:nth-child(3) { animation-delay: .3s; }
.stars-big .off { color: rgba(255,255,255,.18); }
@keyframes starPopKF { 0% { transform: scale(0) rotate(-40deg); } 70% { transform: scale(1.3) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
.rating { font-size: 14px; opacity: .85; }
.result-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  font-size: 13px;
}
.result-grid > div {
  background: rgba(0,0,0,.28);
  border-radius: 10px;
  padding: 8px 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.result-grid b { font-size: 17px; color: #ffd54a; font-variant-numeric: tabular-nums; }
.help-panel { text-align: left; }
.help-panel h2 { text-align: center; }
.help-list { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.55; }
.help-list li { padding-left: 16px; position: relative; }
.help-list li::before { content: "▸"; position: absolute; left: 0; color: #ffca28; }
.help-list b { color: #ffd54a; }

/* ---------- Toast ---------- */
#toast {
  position: fixed;
  left: 50%; bottom: 130px;
  transform: translateX(-50%) translateY(10px);
  background: rgba(20,26,46,.92);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-size: 14px;
  padding: 9px 18px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 800;
  white-space: nowrap;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 桌面端微调 ---------- */
@media (min-width: 560px) {
  h1 { font-size: 40px; }
  .booster { min-width: 86px; }
}