/* ===== 游戏主城 · 扩展样式 ===== */

/* ---------- 主城 ---------- */
.hub { max-width: 860px; margin: 0 auto; padding: 16px 16px 48px; }
.hub-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.hub-head .big-emoji { font-size: 44px; animation: bob 2.8s ease-in-out infinite; }
.hub-head h1 { font-size: 26px; margin: 0; }
.hub-head p { margin: 3px 0 0; font-size: 13px; color: var(--ink-soft); }
.hub-top-right { margin-left: auto; display: flex; gap: 8px; }

.coin-pill {
  display: inline-flex; align-items: center; gap: 5px; background: #fff;
  border-radius: 999px; padding: 8px 14px; box-shadow: var(--shadow-sm);
  font-weight: 900; font-size: 16px; color: #d99b00; white-space: nowrap;
}
.star-pill-soft {
  display: inline-flex; align-items: center; gap: 5px; background: #fff;
  border-radius: 999px; padding: 8px 14px; box-shadow: var(--shadow-sm);
  font-weight: 900; font-size: 16px; color: #f0a500; white-space: nowrap;
}

/* 宠物卡 */
.pet-card {
  background: linear-gradient(150deg, #fff8e8, #eef6ff);
  border-radius: 28px; padding: 18px; box-shadow: var(--shadow);
  display: flex; gap: 16px; align-items: center; margin-bottom: 16px;
  position: relative; overflow: hidden;
}
.pet-card::after {
  content: ""; position: absolute; right: -40px; top: -50px; width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(255,196,83,.28), transparent 68%);
  pointer-events: none;
}
.pet-avatar {
  width: 92px; height: 92px; flex: 0 0 92px; border-radius: 26px;
  background: #fff; box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center; font-size: 54px;
  cursor: pointer; user-select: none; transition: transform .12s ease;
  position: relative; z-index: 1;
}
.pet-avatar:active { transform: scale(.93); }
.pet-avatar.wiggle { animation: petWiggle .6s ease; }
@keyframes petWiggle {
  0%,100% { transform: rotate(0) scale(1); }
  25% { transform: rotate(-9deg) scale(1.06); }
  60% { transform: rotate(8deg) scale(1.04); }
}
.pet-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.pet-name { font-size: 18px; font-weight: 900; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pet-stage-tag {
  font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(135deg,#ffa63d,#ff7a59);
  border-radius: 999px; padding: 3px 9px;
}
.pet-tip { font-size: 13px; color: var(--ink-soft); margin: 5px 0 8px; line-height: 1.45; }
.pet-bar { height: 10px; border-radius: 999px; background: #e9e5f4; overflow: hidden; }
.pet-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg,#7ddc9c,#2fbf71); transition: width .5s ease; }
.pet-bar-label { font-size: 11px; color: var(--ink-soft); margin-top: 5px; display: flex; justify-content: space-between; }
.feed-btn {
  border-radius: 18px; padding: 12px 16px; font-size: 15px; font-weight: 900; color: #fff;
  background: linear-gradient(135deg,#ff9a3d,#ff6b6b); box-shadow: 0 5px 0 #d9482f;
  white-space: nowrap;
}
.feed-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #d9482f; }
.feed-btn[disabled] { background: #d8d5e4; box-shadow: 0 5px 0 #c2bfd0; }

/* 每日签到条 */
.daily {
  display: flex; align-items: center; gap: 12px; background: #fff;
  border-radius: 22px; padding: 14px 16px; box-shadow: var(--shadow-sm); margin-bottom: 16px;
  font-size: 14px; font-weight: 700;
}
.daily.done { background: #f1fbf5; color: #1c8b52; }
.daily .go { margin-left: auto; }

/* 游戏卡 */
.hub-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.hub-game {
  display: block; text-decoration: none; color: var(--ink);
  border-radius: 26px; padding: 20px 18px 16px; box-shadow: var(--shadow);
  position: relative; overflow: hidden; min-height: 178px;
  transition: transform .16s ease, box-shadow .16s ease;
}
.hub-game:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(60,50,100,.16); }
.hub-game:active { transform: scale(.98); }
.hub-game .hg-emoji { font-size: 46px; line-height: 1; display: block; margin-bottom: 8px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.10)); }
.hub-game h3 { margin: 0 0 4px; font-size: 20px; }
.hub-game p { margin: 0; font-size: 12.5px; color: rgba(0,0,0,.55); line-height: 1.5; }
.hub-game .hg-foot {
  position: absolute; left: 18px; right: 18px; bottom: 14px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; font-weight: 800;
}
.hub-game .hg-stars { color: #ffb300; letter-spacing: 1px; }
.hub-game .hg-new {
  position: absolute; right: 14px; top: 14px; background: #ff4d6d; color: #fff;
  font-size: 11px; font-weight: 900; padding: 3px 9px; border-radius: 999px;
  box-shadow: 0 3px 8px rgba(255,77,109,.35);
}
.hg-bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,.65); overflow: hidden; margin-top: 10px; }
.hg-bar i { display: block; height: 100%; background: rgba(255,255,255,.95); border-radius: 999px; }

.card-shop  { background: linear-gradient(160deg,#ffe9c9,#fff7e2); }
.card-robot { background: linear-gradient(160deg,#dfe8ff,#eaf5ff); }
.card-mem   { background: linear-gradient(160deg,#f3e2ff,#ffe9f3); }

/* 家长区 */
.parent-box {
  margin-top: 22px; background: rgba(255,255,255,.78); border-radius: 20px;
  padding: 4px 18px; box-shadow: var(--shadow-sm);
}
.parent-box summary {
  cursor: pointer; font-size: 13.5px; font-weight: 800; color: var(--ink-soft);
  padding: 14px 0; list-style: none;
}
.parent-box summary::-webkit-details-marker { display: none; }
.parent-box summary::before { content: "▸ "; }
.parent-box[open] summary::before { content: "▾ "; }
.parent-box .body { font-size: 13px; color: var(--ink-soft); line-height: 1.75; padding-bottom: 16px; }
.parent-box .body b { color: var(--ink); }
.parent-box .row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.mini-btn {
  background: #fff; border-radius: 14px; padding: 10px 14px; font-size: 13px; font-weight: 800;
  box-shadow: var(--shadow-sm); color: var(--ink);
}
.mini-btn.danger { color: #c23a42; }

/* 金币飞入 */
.coin-fly {
  position: fixed; top: 62%; font-size: 26px; z-index: 70; pointer-events: none;
  animation: coinUp 1.25s ease-out forwards;
}
@keyframes coinUp {
  0% { opacity: 0; transform: translateY(0) scale(.6); }
  25% { opacity: 1; transform: translateY(-30px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-190px) scale(.8); }
}

/* ---------- 小小商店 ---------- */
.shop-scene {
  background: linear-gradient(180deg,#fffaf0,#fff3dd);
  border-radius: 26px; padding: 16px; box-shadow: var(--shadow); margin-bottom: 14px;
  position: relative; overflow: hidden;
}
.shop-scene::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46px;
  background: repeating-linear-gradient(90deg,#ff8a3d 0 18px,#ffd166 18px 36px);
  opacity: .22;
}
.customer-row { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 12px; position: relative; }
.customer-face { font-size: 44px; line-height: 1; animation: bob 2.4s ease-in-out infinite; }
.bubble {
  background: #fff; border-radius: 18px 18px 18px 4px; padding: 10px 14px;
  font-size: 15px; font-weight: 800; box-shadow: var(--shadow-sm); line-height: 1.45;
  flex: 1; min-width: 0;
}
.bubble small { display: block; font-weight: 600; font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

.goods { display: flex; gap: 10px; flex-wrap: wrap; }
.good {
  background: #fff; border-radius: 18px; padding: 10px 12px; box-shadow: var(--shadow-sm);
  display: flex; align-items: center; gap: 10px; min-width: 132px; flex: 1;
  animation: fadeUp .3s ease both;
}
.good .g-emoji { font-size: 32px; line-height: 1; }
.good .g-meta { display: flex; flex-direction: column; }
.good .g-name { font-size: 14px; font-weight: 800; }
.price-tag {
  display: inline-block; margin-top: 3px; font-size: 13px; font-weight: 900; color: #c2410c;
  background: #fff1e2; border-radius: 8px; padding: 2px 7px; align-self: flex-start;
}
.good .g-qty { font-size: 12px; font-weight: 800; color: var(--ink-soft); }

.cashier { background: #fff; border-radius: 26px; padding: 16px; box-shadow: var(--shadow); }
.ask-line { font-size: 17px; font-weight: 900; text-align: center; margin-bottom: 4px; line-height: 1.45; }
.ask-sub { font-size: 13px; color: var(--ink-soft); text-align: center; margin-bottom: 12px; }
.money-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.money-btn {
  padding: 18px 10px; border-radius: 20px; font-size: 21px; font-weight: 900;
  background: linear-gradient(180deg,#fff,#fff6e8); color: #b45309;
  box-shadow: 0 5px 0 #f0dfc4, 0 8px 14px rgba(120,80,20,.08);
  border: 2px solid #ffe3bd;
  transition: transform .1s ease, box-shadow .1s ease;
}
.money-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #f0dfc4; }
.money-btn.correct { background: linear-gradient(180deg,#6ee7a8,#2fbf71); color:#fff; border-color:#2fbf71; box-shadow: 0 5px 0 #1f9c59; }
.money-btn.wrong { background: linear-gradient(180deg,#ff8e94,#f2545b); color:#fff; border-color:#f2545b; box-shadow: 0 5px 0 #c53b42; }
.money-btn.dim { opacity: .42; }
.money-btn[disabled] { cursor: default; }

.cash-note {
  display: inline-flex; align-items: center; gap: 8px; background: #eaf7ef; color: #1c8b52;
  border-radius: 14px; padding: 8px 14px; font-weight: 900; font-size: 15px; margin: 0 auto 12px;
}
.cash-note-wrap { text-align: center; }

.receipt {
  background: #fff; border-radius: 20px; padding: 10px 14px; margin-top: 10px;
  font-size: 13px; color: var(--ink-soft); display: flex; justify-content: space-between;
  box-shadow: var(--shadow-sm);
}

/* ---------- 机器人闯关 ---------- */
.robot-stage { display: grid; gap: 12px; }
.map-wrap {
  background: linear-gradient(160deg,#eef4ff,#f7fbff);
  border-radius: 24px; padding: 10px; box-shadow: var(--shadow);
  position: relative;
}
.map-grid {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  display: grid; grid-template-columns: repeat(var(--n, 6), 1fr); grid-template-rows: repeat(var(--n, 6), 1fr);
  gap: 3px;
}
.cell {
  background: rgba(255,255,255,.9); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.cell.wall { background: linear-gradient(160deg,#b9c0d4,#9aa3bb); box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); }
.cell.goal { background: #fff8dd; }
.cell.goal::after { content: "⭐"; font-size: 22px; animation: bob 1.8s ease-in-out infinite; }
.robot-token {
  position: absolute; display: flex; align-items: center; justify-content: center;
  transition: left .26s ease, top .26s ease, transform .26s ease;
  font-size: 26px; z-index: 2; pointer-events: none;
}
.robot-token.bump { animation: shake .3s ease; }

.program-box {
  background: #fff; border-radius: 24px; padding: 12px 14px 14px; box-shadow: var(--shadow);
}
.program-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.program-head h3 { font-size: 14px; margin: 0; color: var(--ink-soft); letter-spacing: .5px; }
.program-head .count { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.program-list { display: flex; flex-wrap: wrap; gap: 8px; min-height: 54px; align-content: flex-start; }
.program-empty { font-size: 13px; color: #b9b5cc; padding: 14px 2px; }
.block {
  display: inline-flex; align-items: center; gap: 6px; background: #eef4ff; color: #2b4a8b;
  border-radius: 14px; padding: 10px 12px; font-size: 14px; font-weight: 900;
  box-shadow: 0 3px 0 #cddcf6; cursor: pointer; animation: pop .3s ease;
  border: 1px solid #d9e6ff;
}
.block[data-t="left"], .block[data-t="right"] { background: #fff1e2; color: #b45309; box-shadow: 0 3px 0 #f2d9bd; border-color: #ffe3bd; }
.block[data-t="rep"] { background: #f3e9ff; color: #7b3fb5; box-shadow: 0 3px 0 #e0cbf7; border-color: #ebdcff; }
.block.rep-inner { font-size: 12.5px; padding: 7px 9px; }
.block .b-del { font-size: 12px; opacity: .45; }
.block.playing { outline: 3px solid #ffb300; transform: translateY(-2px); }

.palette { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.pal-btn {
  background: #fff; border-radius: 16px; padding: 12px 6px; font-size: 13px; font-weight: 900;
  box-shadow: var(--shadow-sm); color: var(--ink); display: flex; flex-direction: column;
  align-items: center; gap: 3px; border: 2px solid transparent;
}
.pal-btn .p-emoji { font-size: 20px; }
.pal-btn:active { transform: scale(.95); }
.pal-btn.hot { border-color: #ffb300; background: #fffdf2; }

.run-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; margin-top: 10px; }
.run-btn {
  padding: 16px; border-radius: 20px; font-size: 16px; font-weight: 900; color: #fff;
  background: linear-gradient(135deg,#4ecb8f,#2fbf71); box-shadow: 0 6px 0 #1f9c59;
}
.run-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #1f9c59; }
.run-btn[disabled] { background: #d8d5e4; box-shadow: 0 6px 0 #c2bfd0; }
.util-btn {
  padding: 16px 8px; border-radius: 20px; font-size: 14px; font-weight: 900; color: var(--ink);
  background: #fff; box-shadow: var(--shadow-sm);
}
.util-btn:active { transform: scale(.96); }

.rep-pop {
  position: fixed; inset: 0; background: rgba(30,26,50,.42); z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: fadeUp .2s ease both;
}
.rep-panel {
  background: #fff; border-radius: 26px; padding: 20px; width: 100%; max-width: 340px;
  box-shadow: 0 20px 50px rgba(20,10,40,.28); text-align: center;
}
.rep-panel h4 { margin: 0 0 12px; font-size: 17px; }
.rep-group { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.rep-opt {
  min-width: 56px; padding: 12px 14px; border-radius: 14px; background: #f5f2fc; font-weight: 900;
  font-size: 15px; color: var(--ink); border: 2px solid transparent;
}
.rep-opt.sel { background: #fff4e0; border-color: #ffb300; color: #b45309; }
.rep-actions { display: flex; gap: 8px; margin-top: 14px; }
.rep-actions button { flex: 1; padding: 14px; border-radius: 16px; font-weight: 900; font-size: 15px; }
.rep-ok { background: linear-gradient(135deg,#ff9a3d,#ff6b6b); color: #fff; box-shadow: 0 4px 0 #d9482f; }
.rep-cancel { background: #f2f0f8; color: var(--ink-soft); }

/* ---------- 记忆翻翻乐 ---------- */
.mem-hud { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.mem-hud .pill {
  background: #fff; border-radius: 999px; padding: 8px 13px; font-size: 13px;
  font-weight: 900; box-shadow: var(--shadow-sm); white-space: nowrap;
}
.mem-hud .pill.spacer { margin-left: auto; }
.mem-grid {
  display: grid; gap: 8px; margin: 0 auto;
  perspective: 900px;
}
.mem-card {
  position: relative; aspect-ratio: 1 / 1; border-radius: 16px;
  background: none; padding: 0; transform-style: preserve-3d;
  transition: transform .35s ease;
}
.mem-card .face {
  position: absolute; inset: 0; border-radius: 16px; display: flex;
  align-items: center; justify-content: center; backface-visibility: hidden;
  font-weight: 900; box-shadow: var(--shadow-sm); overflow: hidden;
  padding: 4px; text-align: center; line-height: 1.15; word-break: break-word;
}
.mem-card .back {
  background: linear-gradient(150deg,#8f7cf0,#6a5ae0); color: #fff;
  font-size: 26px;
}
.mem-card .back::after { content: "?"; opacity: .85; }
.mem-card .front {
  background: #fff; transform: rotateY(180deg); color: var(--ink);
  font-size: 15px;
}
.mem-card.emoji-face .front { font-size: 30px; }
.mem-card.flipped { transform: rotateY(180deg); }
.mem-card.matched .front { background: linear-gradient(160deg,#e8fbf0,#d6f7e4); color: #1c8b52; }
.mem-card.matched { animation: pop .4s ease; }
.mem-card.wrong .front { background: linear-gradient(160deg,#fff0f1,#ffe0e2); }

.flash-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.flash-cell {
  aspect-ratio: 1 / 1; border-radius: 20px; background: #fff; font-size: 38px;
  box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center;
  transition: transform .12s ease;
}
.flash-cell:active { transform: scale(.94); }
.flash-cell.used { opacity: .35; }
.flash-cell.wrongflip { animation: shake .3s ease; }

.flash-stage {
  background: #fff; border-radius: 26px; min-height: 190px; box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 20px; margin-bottom: 14px;
}
.flash-slot {
  width: 62px; height: 62px; border-radius: 18px; background: #f5f2fc;
  display: flex; align-items: center; justify-content: center; font-size: 34px;
  transition: background .2s ease, transform .2s ease;
}
.flash-slot.on { background: #fff3d6; transform: scale(1.08); box-shadow: 0 0 0 3px #ffd166 inset; }
.flash-slot.done { background: #e8fbf0; }

/* ---------- 移动端 ---------- */
@media (max-width: 640px) {
  .hub { padding: 12px 12px 40px; }
  .hub-head h1 { font-size: 21px; }
  .hub-head .big-emoji { font-size: 34px; }
  .hub-cards { grid-template-columns: 1fr; gap: 10px; }
  .hub-game { min-height: 148px; padding: 16px 16px 14px; }
  .hub-game .hg-emoji { font-size: 38px; }
  .pet-card { padding: 14px; gap: 12px; }
  .pet-avatar { width: 76px; height: 76px; flex: 0 0 76px; font-size: 44px; border-radius: 22px; }
  .pet-name { font-size: 16px; }
  .feed-btn { padding: 10px 12px; font-size: 14px; }
  .money-btn { font-size: 19px; padding: 16px 8px; }
  .palette { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .pal-btn { font-size: 12px; padding: 10px 4px; }
  .run-row { grid-template-columns: 1.6fr 1fr 1fr; }
  .block { font-size: 13px; padding: 8px 10px; }
  .mem-card .front { font-size: 13px; }
  .mem-card.emoji-face .front { font-size: 24px; }
}