/* =========================================================
   班级电子宠物 · 统一样式（浅色 / 可爱风）
   ========================================================= */

:root {
  --bg: #F7F6F1;
  --card: #FFFFFF;
  --ink: #2C2C2A;
  --ink-2: #5F5E5A;
  --ink-3: #9A9891;
  --line: #E7E4DA;
  --mint: #1D9E75;
  --mint-bg: #E1F5EE;
  --mint-d: #0F6E56;
  --peach: #D85A30;
  --peach-bg: #FAECE7;
  --pink: #D4537E;
  --pink-bg: #FBEAF0;
  --amber: #BA7517;
  --amber-bg: #FAEEDA;
  --blue: #378ADD;
  --blue-bg: #E6F1FB;
  --red: #E24B4A;
  --red-bg: #FCEBEB;
  --r: 14px;
  --r-sm: 10px;
  --shadow: 0 2px 10px rgba(44, 44, 42, 0.06);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: 14px; }
a { color: var(--mint); }

/* ---------------- 布局骨架 ---------------- */

.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  padding-bottom: 76px;
  position: relative;
}

.teacher-app { max-width: 900px; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 10px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}

.topbar h1 { font-size: 16px; font-weight: 500; margin: 0; }
.topbar .sub { font-size: 12px; color: var(--ink-3); }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--amber-bg); color: var(--amber);
  border-radius: 999px; padding: 4px 11px;
  font-size: 13px; font-weight: 500; white-space: nowrap;
}
.pill.mint { background: var(--mint-bg); color: var(--mint-d); }
.pill.gray { background: #F1EFE8; color: var(--ink-2); }

.content { padding: 14px 16px 24px; }

.view { display: none; }
.view.active { display: block; }

/* ---------------- 卡片 ---------------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.card.flat { box-shadow: none; }
.card-title {
  font-size: 14px; font-weight: 500; margin: 0 0 10px;
  display: flex; align-items: center; justify-content: space-between;
}
.card-title small { font-weight: 400; color: var(--ink-3); font-size: 12px; }
.muted { color: var(--ink-3); font-size: 12px; }
.center { text-align: center; }
.row { display: flex; gap: 10px; align-items: center; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.mt6 { margin-top: 6px; } .mt10 { margin-top: 10px; } .mt16 { margin-top: 16px; }

/* ---------------- 宠物舞台 ---------------- */

.pet-stage {
  text-align: center;
  background: linear-gradient(180deg, #FFFFFF 0%, #F4FBF7 100%);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 14px 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.pet-stage .pet-name { font-size: 17px; font-weight: 500; }
.pet-stage .pet-meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.pet-box { height: 190px; display: flex; align-items: center; justify-content: center; }
.pet-box svg, .pet-box img { width: 190px; height: 190px; }
.pet-box svg { animation: bob 3.2s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) {
  .pet-box svg { animation: none; }
}
.state-tag {
  position: absolute; top: 12px; right: 12px;
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  background: var(--mint-bg); color: var(--mint-d);
}
.state-tag.warn { background: var(--amber-bg); color: var(--amber); }
.state-tag.bad { background: var(--red-bg); color: var(--red); }

/* ---------------- 状态条 ---------------- */

.bar-row { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.bar-label { font-size: 12px; color: var(--ink-2); width: 52px; flex: none; }
.bar-track { flex: 1; height: 10px; border-radius: 999px; background: #F1EFE8; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; transition: width .45s ease; }
.bar-fill.hunger { background: #EF9F27; }
.bar-fill.mood { background: #5DCAA5; }
.bar-fill.exp { background: #7F77DD; }
.bar-val { font-size: 12px; color: var(--ink-3); width: 46px; text-align: right; flex: none; }

/* ---------------- 按钮 ---------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--mint); color: #fff; font-size: 14px; font-weight: 500;
  transition: opacity .15s;
  white-space: nowrap;
}
.btn:hover { opacity: .88; }
.btn:disabled { background: #D3D1C7; cursor: not-allowed; }
.btn.block { width: 100%; }
.btn.ghost { background: #F1EFE8; color: var(--ink); }
.btn.ghost:hover { opacity: .8; }
.btn.amber { background: var(--amber); }
.btn.pink { background: var(--pink); }
.btn.sm { padding: 6px 12px; font-size: 13px; }
.btn.xs { padding: 4px 10px; font-size: 12px; border-radius: 8px; }
.btn.outline { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.btn.outline:disabled { background: #F7F6F1; border-color: #EFEDE5; color: #B4B2A9; }
.btn.ghost:disabled { background: #F7F6F1; color: #B4B2A9; }

/* ---------------- 列表项 ---------------- */

.item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.item:last-child { border-bottom: none; }
.item .ico {
  width: 40px; height: 40px; flex: none; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; background: #F7F6F1;
}
.item .t { font-size: 14px; font-weight: 500; }
.item .s { font-size: 12px; color: var(--ink-3); }

/* ---------------- 商店格子 ---------------- */

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shop-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px; text-align: center; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 4px;
}
.shop-card .emoji { font-size: 30px; line-height: 1.2; }
.shop-card .nm { font-size: 13px; font-weight: 500; }
.shop-card .ds { font-size: 11px; color: var(--ink-3); min-height: 30px; }
.shop-card .pr { font-size: 13px; color: var(--amber); font-weight: 500; }
.shop-card .eff { font-size: 11px; color: var(--mint-d); }
.shop-card .acts { display: flex; gap: 6px; margin-top: 4px; }
.shop-card .acts .btn { flex: 1; }

/* ---------------- 排行榜 ---------------- */

.rank-row { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rank-row:last-child { border-bottom: none; }
.rank-no {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500; background: #F1EFE8; color: var(--ink-2);
}
.rank-no.g1 { background: #FAEEDA; color: #854F0B; }
.rank-no.g2 { background: #EEF1F4; color: #5F5E5A; }
.rank-no.g3 { background: #FAECE7; color: #993C1D; }
.rank-row.me { background: var(--mint-bg); border-radius: 10px; padding-left: 8px; padding-right: 8px; }

/* ---------------- 底部导航 ---------------- */

.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  max-width: 480px; margin: 0 auto;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  display: flex; z-index: 30;
}
.tabbar button {
  flex: 1; padding: 8px 0 10px; font-size: 11px; color: var(--ink-3);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.tabbar button .ti { font-size: 19px; line-height: 1.2; }
.tabbar button.active { color: var(--mint-d); font-weight: 500; }

/* ---------------- 登录页 ---------------- */

.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.login-card {
  width: 100%; max-width: 370px; background: var(--card);
  border: 1px solid var(--line); border-radius: 18px; padding: 26px 22px;
  box-shadow: 0 6px 24px rgba(44,44,42,.08); text-align: center;
}
.login-card h2 { font-size: 19px; font-weight: 500; margin: 12px 0 4px; }
.login-card .hint { font-size: 12px; color: var(--ink-3); margin-bottom: 18px; }
.field { text-align: left; margin-bottom: 12px; }
.field label { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 5px; }
.field input, .field select {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: #FDFDFB; outline: none;
}
.field input:focus { border-color: var(--mint); background: #fff; }

/* ---------------- 提示 ---------------- */

.toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(12px);
  background: rgba(44,44,42,.92); color: #fff;
  padding: 10px 18px; border-radius: 999px; font-size: 13px;
  opacity: 0; pointer-events: none; transition: all .22s; z-index: 90;
  max-width: 84vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.empty { text-align: center; color: var(--ink-3); font-size: 13px; padding: 26px 0; }

/* ---------------- 教师端表格 ---------------- */

.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left; font-weight: 500; color: var(--ink-2);
  padding: 9px 8px; border-bottom: 1px solid var(--line); font-size: 12px;
  background: #FBFAF7;
}
.tbl td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: #FBFAF7; }

/* 5 个统计块（加了"累计称号"）用 auto-fit，窄屏自己折行，不用手改列数 */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin-bottom: 14px; }
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px; text-align: center; box-shadow: var(--shadow);
}
.stat .n { font-size: 21px; font-weight: 500; }
.stat .l { font-size: 12px; color: var(--ink-3); }

.tabs {
  display: flex; gap: 4px; background: #F1EFE8; border-radius: 11px;
  padding: 3px; margin-bottom: 14px; overflow-x: auto;
}
.tabs button {
  flex: 1; padding: 8px 12px; border-radius: 9px; font-size: 13px;
  color: var(--ink-2); white-space: nowrap;
}
.tabs button.active { background: #fff; color: var(--ink); font-weight: 500; box-shadow: 0 1px 3px rgba(0,0,0,.06); }

.avatar {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: var(--mint-bg); color: var(--mint-d);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 500;
}
.avatar.sm { width: 28px; height: 28px; font-size: 12px; }

.chkbox { width: 17px; height: 17px; accent-color: #1D9E75; flex: none; }

.banner {
  background: var(--blue-bg); color: #185FA5; border-radius: var(--r-sm);
  padding: 10px 12px; font-size: 12.5px; margin-bottom: 12px;
}
.banner.amber { background: var(--amber-bg); color: var(--amber); }

@media (max-width: 620px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .tbl .hide-sm { display: none; }
}

/* =========================================================
   宠物互动：对话气泡 / 动作按钮 / 图鉴抽屉
   ========================================================= */

/* ---------------- 对话气泡 ---------------- */
.talk {
  position: relative;
  min-height: 38px;
  display: flex; align-items: center; justify-content: center;
  padding: 2px 6px 6px;
}
.talk span {
  display: inline-block;
  max-width: 100%;
  background: #FFFFFF;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 6px 14px;
  font-size: 13.5px;
  color: var(--ink-2);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.talk.show span { opacity: 1; transform: translateY(0); }
.talk::after {
  content: '';
  position: absolute; bottom: 1px; left: 50%; margin-left: -6px;
  width: 0; height: 0;
  border: 6px solid transparent;
  border-top-color: #FFFFFF;
  opacity: 0; transition: opacity .25s ease;
}
.talk.show::after { opacity: 1; }

/* ---------------- 动作按钮 ---------------- */
.act-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.act-btn {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-size: 21px; line-height: 1.15; padding: 9px 2px 7px;
  transition: transform .12s ease;
}
.act-btn span { font-size: 11.5px; }
.act-btn:active { transform: scale(.93); }

/* 点宠物 ---------------- */
/* touch-action: pan-y —— 横向拖动算"抚摸宠物"不触发滚动，
   纵向仍然能正常滑页面，免得手指在宠物上就滑不动页面了 */
.pet-box { cursor: pointer; touch-action: pan-y; -webkit-user-select: none; user-select: none; }

/* 动作动画：都作用在 svg 上，并先关掉默认的浮动动画，避免两个动画打架 */
@keyframes pet-dance { 0%,100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-9px) rotate(5deg); } }
@keyframes pet-sing  { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes pet-spin  { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pet-roll  { 0% { transform: translateX(-16px) rotate(0deg); } 100% { transform: translateX(16px) rotate(-360deg); } }
@keyframes pet-jump  { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-20px); } }
@keyframes pet-cute  { 0%,100% { transform: scale(1) rotate(0deg); } 25% { transform: scale(1.07) rotate(-4deg); } 75% { transform: scale(1.07) rotate(4deg); } }
/* 四个互动姿势的整只动画：抱抱是轻轻晃，洗澡是上下搓，睡觉是呼吸式起伏，散步是左右踱步 */
@keyframes pet-hug   { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.05); } }
@keyframes pet-bath  { 0%,100% { transform: translateY(0) rotate(-2.5deg); } 50% { transform: translateY(4px) rotate(2.5deg); } }
@keyframes pet-sleep { 0%,100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(3px) scale(1.02, .97); } }
@keyframes pet-walk  { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }

.pet-box[class*="act-"] svg { animation: none; }
.pet-box.act-dance svg { animation: pet-dance .62s ease-in-out 5; }
.pet-box.act-sing  svg { animation: pet-sing  .8s  ease-in-out 4; }
.pet-box.act-spin  svg { animation: pet-spin  1s    linear 2; }
.pet-box.act-roll  svg { animation: pet-roll  1.1s  ease-in-out 2; }
.pet-box.act-jump  svg { animation: pet-jump  .7s   ease-in-out 3; }
.pet-box.act-cute  svg { animation: pet-cute  .9s   ease-in-out 3; }
.pet-box.act-hug   svg { animation: pet-hug   1s    ease-in-out 3; }
.pet-box.act-bath  svg { animation: pet-bath  .68s  ease-in-out 5; }
.pet-box.act-sleep svg { animation: pet-sleep 2.4s  ease-in-out 2; }
.pet-box.act-walk  svg { animation: pet-walk  .72s  ease-in-out 4; }

@media (prefers-reduced-motion: reduce) {
  .pet-box svg { animation: none !important; }
}

/* ---------------- 图鉴抽屉 ---------------- */
.sheet-mask {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20, 32, 27, .44);
  display: none; align-items: flex-end; justify-content: center;
}
.sheet-mask.show { display: flex; }
.sheet {
  width: 100%; max-width: 480px; max-height: 84vh;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -6px 24px rgba(44, 44, 42, .16);
}
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 4px;
  font-size: 16px;
}
.sheet-close { font-size: 15px; color: var(--ink-3); padding: 4px 8px; }
.sheet-tip { font-size: 12px; color: var(--ink-3); padding: 0 16px 10px; }
.sheet-body { overflow-y: auto; padding: 2px 12px 22px; -webkit-overflow-scrolling: touch; }
.sheet-group {
  font-size: 13px; color: var(--mint-d); font-weight: 500;
  margin: 12px 4px 8px;
  padding-left: 8px; border-left: 3px solid var(--mint);
}
.species-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sp-cell {
  background: #FCFEFD;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 6px 2px 5px;
  text-align: center;
  transition: transform .12s ease;
}
.sp-cell:active { transform: scale(.95); }
.sp-cell.on { border-color: var(--mint); background: var(--mint-bg); }
.sp-cell svg { width: 56px; height: 56px; display: block; margin: 0 auto; }
.sp-cell b { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-2); margin-top: 2px; }
.sp-cell i { display: block; font-size: 10px; font-style: normal; color: var(--ink-3); }

@media (max-width: 360px) {
  .species-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   摸它一下：弹一下 + 飘爱心星星
   （宠物自身的眨眼/呼吸/摇尾由 SVG 内部的 SMIL 负责，
     这里的 CSS 只负责"整只"的反应式动画）
   ========================================================= */
.pet-box.pet-bounce svg { animation: petBounce .58s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes petBounce {
  0%   { transform: scale(1) translateY(0); }
  30%  { transform: scale(1.1, .9) translateY(4px); }
  60%  { transform: scale(.95, 1.06) translateY(-9px); }
  100% { transform: scale(1) translateY(0); }
}

/* 戳肚子：怕痒，左右扭 + 缩成一团（重复 2 次，比摸头快、幅度大） */
.pet-box.pet-tickle svg { animation: petTickle .34s ease-in-out 3; }
@keyframes petTickle {
  0%   { transform: rotate(0deg) scale(1, 1); }
  25%  { transform: rotate(-9deg) scale(.94, 1.06); }
  50%  { transform: rotate(7deg)  scale(1.06, .94); }
  75%  { transform: rotate(-5deg) scale(.97, 1.03); }
  100% { transform: rotate(0deg)  scale(1, 1); }
}

/* 按住来回抚摸：轻轻左右摇，一直摇到手松开 */
.pet-box.pet-stroke svg { animation: petStroke 1.5s ease-in-out infinite; }
@keyframes petStroke {
  0%   { transform: rotate(0deg)   translateY(0); }
  25%  { transform: rotate(-4.5deg) translateY(-3px); }
  50%  { transform: rotate(0deg)    translateY(0); }
  75%  { transform: rotate(4.5deg)  translateY(-3px); }
  100% { transform: rotate(0deg)    translateY(0); }
}

.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.fx-heart {
  position: absolute; font-style: normal; font-size: 19px;
  will-change: transform, opacity;
  animation: fxPop 1.15s cubic-bezier(.22, .61, .36, 1) forwards;
}
@keyframes fxPop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.3); }
}

@media (prefers-reduced-motion: reduce) {
  .pet-box.pet-bounce svg { animation: none !important; }
  .fx-heart { display: none; }
}

/* =========================================================
   称号 / 亲密值 / 互动 / 排行榜
   ========================================================= */

/* ---------------- 宠物名旁边"戴"着的称号 ---------------- */

.pet-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; font-weight: 500; line-height: 1.5;
  padding: 1px 9px; border-radius: 999px;
  margin-left: 7px; vertical-align: 2px;
  border: 1px solid currentColor;
  background: #fff;
}

/* ---------------- 亲密值条 ---------------- */

.bar-fill.bond { background: #F58AA8; }

/* ---------------- 亲密互动格子 ---------------- */

.interact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ibtn {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: #F2FBF7; border: 1.5px solid #BEE7D8; border-radius: 13px;
  padding: 9px 4px 7px; font-size: 21px; line-height: 1.15;
  transition: transform .12s ease, background .2s, border-color .2s;
}
.ibtn:active { transform: scale(.94); }
.ibtn .iemo { font-size: 21px; line-height: 1.15; transition: filter .2s, opacity .2s; }
.ibtn .inm { font-size: 11.5px; color: var(--ink-2); font-weight: 500; }
.ibtn .ief { font-size: 10px; color: var(--mint-d); }
/* 冷却中：图标变灰、名字压淡、效果行换成倒计时。
   （早先用整块半透明遮罩盖住，结果连"这是哪个互动"都看不清了） */
.ibtn.cool { background: #F7F6F1; border-color: #EFEDE5; }
.ibtn.cool .iemo { filter: grayscale(1); opacity: .4; }
.ibtn.cool .inm { color: var(--ink-3); font-weight: 400; }
.ibtn.cool .ief { color: var(--ink-3); }

/* ---------------- 排行榜：榜单切换 ---------------- */

.rank-tabs { display: flex; gap: 5px; margin-bottom: 12px; overflow-x: auto; }
.rank-tabs button {
  flex: 1; padding: 7px 6px; border-radius: 9px; font-size: 12.5px;
  background: #F1EFE8; color: var(--ink-2); white-space: nowrap;
  transition: background .18s;
}
.rank-tabs button.active { background: var(--mint-bg); color: var(--mint-d); font-weight: 500; }

/* ---------------- 排行榜：前三名领奖台 ---------------- */

.podium { display: flex; align-items: flex-end; justify-content: center; gap: 6px; margin: 4px 0 14px; }
.podium-item { flex: 1; max-width: 108px; text-align: center; }
.podium-item .pd-pet { display: block; margin: 0 auto; width: 72px; height: 72px; }
.podium-item .pd-pet svg { width: 72px; height: 72px; }
.podium-item .pd-name {
  font-size: 12.5px; font-weight: 500; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.podium-item .pd-badge { font-size: 10.5px; color: var(--ink-3); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.podium-item .pd-val { font-size: 12px; font-weight: 500; color: var(--amber); }
.podium-item .pd-bar {
  margin-top: 6px; border-radius: 10px 10px 0 0;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 5px; font-size: 19px;
}
.podium-item.g1 .pd-bar { height: 62px; background: linear-gradient(180deg, #FBE7BC, #F6D48C); }
.podium-item.g2 .pd-bar { height: 46px; background: linear-gradient(180deg, #E8EBEF, #D6DBE1); }
.podium-item.g3 .pd-bar { height: 36px; background: linear-gradient(180deg, #F7E0D3, #EEC9B3); }
.podium-item .pd-bar span { opacity: .75; }

/* ---------------- 称号墙 ---------------- */

.title-group-name {
  font-size: 12px; color: var(--mint-d); font-weight: 500;
  margin: 12px 0 7px; padding-left: 7px; border-left: 3px solid var(--mint);
}
.title-group-name:first-child { margin-top: 0; }
.title-wall { display: flex; flex-wrap: wrap; gap: 7px; }
.title-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border-radius: 11px;
  background: #fff; border: 1.5px solid var(--line);
  font-size: 12.5px; font-weight: 500;
  transition: transform .12s ease, border-color .18s;
}
.title-chip:active { transform: scale(.95); }
.title-chip .tnum {
  font-size: 10.5px; font-weight: 400; opacity: .7;
}
.title-chip .temoji { font-size: 15px; }
.title-chip.on {
  border-color: currentColor;
  box-shadow: 0 2px 8px rgba(44, 44, 42, .1);
}
/* 「佩戴中」只属于学生端——老师端挑称号时同样有 .on，但那只是"选中待发" */
.title-chip.worn::after {
  content: '佩戴中';
  font-size: 9.5px; font-weight: 400;
  background: currentColor; color: #fff;
  padding: 0 5px; border-radius: 999px; line-height: 1.6;
}
.title-chip.dim { opacity: .62; }

/* 老师端「发称号」：已选中的称号预览块 */
.title-picked {
  margin-top: 12px; padding: 10px 12px;
  background: #FBFAF7; border: 1px dashed var(--line); border-radius: var(--r-sm);
  font-size: 13px;
}
.title-picked .tp-label { color: var(--ink-3); font-size: 12px; margin-right: 4px; }

/* 老师端：学生多选 chip */
.pick-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 999px;
  background: #fff; border: 1.5px solid var(--line);
  font-size: 13px; color: var(--ink-2);
  transition: transform .12s ease, border-color .18s, background .18s;
}
.pick-chip:active { transform: scale(.95); }
.pick-chip.on { background: var(--mint-bg); border-color: var(--mint); color: var(--mint-d); font-weight: 500; }
.pick-chip .pc-n { font-size: 11px; color: var(--ink-3); }
.pick-chip.on .pc-n { color: var(--mint-d); }

/* 老师端：已发称号列表前面的圆形徽章 */
.award-emoji {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}

/* 老师端：学生详情弹层头部 */
.stu-top { display: flex; gap: 12px; align-items: center; }
.stu-top .stu-pet { flex: none; width: 110px; height: 110px; }
.stu-top .stu-pet svg { width: 110px; height: 110px; }

/* =========================================================
   皮肤 / 装扮 / 抽奖（商店的三个新分区）
   ========================================================= */

/* 四个 tab 必须在手机窄屏（360~430px）里全部露出来 —— 早先用 flex 会被内容撑开，
   430px 下第 4 个「抽奖」被切掉，学生根本不知道右边还能划（底部导航也会被顶出去）。
   这里改成等分网格：每格恒为 1/4 宽，无论屏幕多窄都不可能溢出。 */
.shop-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px;
  margin-bottom: 12px; max-width: 100%; }
.stab { padding: 9px 2px; border-radius: 99px; background: var(--card);
  border: 1px solid var(--line); font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  text-align: center; white-space: nowrap; overflow: hidden;
  transition: background .15s, color .15s, border-color .15s; }
.stab.active { background: var(--mint); border-color: var(--mint); color: #fff; font-weight: 600; }

.spanel { display: none; }
.spanel.active { display: block; }

/* 皮肤 / 装扮卡片：两列，窄屏也能放得下 */
.cos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cos-card { background: var(--card); border-radius: var(--r); padding: 10px;
  box-shadow: var(--shadow); border: 2px solid transparent; transition: border-color .15s; }
.cos-card.on { border-color: var(--mint); }
.cos-pic { display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(circle at 50% 62%, #FFFFFF, #EFF3FA);
  border-radius: var(--r-sm); height: 116px; }
.cos-pic svg { height: 112px; width: auto; }
.cos-nm { font-weight: 600; font-size: 13.5px; margin-top: 8px;
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.cos-ds { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.45; min-height: 33px; }
.cos-pr { font-size: 12.5px; font-weight: 600; color: var(--amber); margin-top: 6px;
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.cos-card .acts { margin-top: 8px; }
.cos-card .acts .btn { width: 100%; }

.rarity { color: #fff; font-size: 10.5px; padding: 1px 7px; border-radius: 99px; font-weight: 500; }

/* 抽奖：九宫格轮转。hit 是"正在掠过的格子"，win 是最终停在的那格 */
.lottery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lcell { background: #FDFDFB; border: 2px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 4px; text-align: center;
  transition: transform .08s, border-color .08s, background .08s; }
.lemo { display: block; font-size: 26px; line-height: 1.1; }
.lnm { display: block; font-size: 11px; color: var(--ink-2); margin-top: 4px; }
.lcell.hit { background: var(--amber-bg); border-color: var(--amber); transform: scale(1.07); }
.lcell.win { background: var(--mint-bg); border-color: var(--mint); transform: scale(1.11);
  box-shadow: 0 0 0 4px rgba(29, 158, 117, .16); }

.draw-stage { margin-top: 12px; min-height: 58px; display: flex; align-items: center; justify-content: center; }
.prize { text-align: center; padding: 12px 16px; border-radius: var(--r); width: 100%;
  animation: prize-in .38s cubic-bezier(.2, 1.5, .4, 1); }
.prize.common { background: var(--blue-bg); }
.prize.epic   { background: #F3E8FF; }
.prize.legend { background: linear-gradient(135deg, #FFF3D6, #FFE3F1, #E4F1FF); }
.pz-label { font-weight: 700; font-size: 15px; }
.pz-detail { font-size: 13.5px; color: var(--ink-2); margin-top: 3px; }
.pz-new { font-size: 12px; color: var(--mint-d); margin-top: 5px; font-weight: 600; }
@keyframes prize-in { from { transform: scale(.72); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* 窄屏：卡片改单列更宽松 */
@media (max-width: 360px) {
  .cos-grid { grid-template-columns: 1fr; }
  .cos-pic { height: 104px; }
}