/* shop.css —— 商店场景样式（DESIGN.md §2.4）。只作用于 .mx-scene--shop 之下；
   购买确认弹窗由 ui.modal 挂在 body 上，用 .mx-shop__modal / .mx-shop__confirm 限定。
   颜色、圆角、阴影、字体一律取 tokens.css 的变量。 */

/* ---------------------------------------------------------------- 骨架 */

.mx-scene--shop .mx-shop__head { padding-bottom: 8px; }

/* 左右两栏：左边试一试（固定宽），右边商品面板；面板内的网格自己滚动 */
.mx-scene--shop .mx-shop__body {
  display: flex;
  align-items: stretch;
  gap: 18px;
  padding-top: 6px;
  overflow: hidden;              /* 宽屏下只让商品网格滚 */
}

.mx-scene--shop .mx-shop__side {
  display: flex;
  flex: 0 0 300px;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.mx-scene--shop .mx-shop__goods {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 14px 16px 16px;
}

/* ---------------------------------------------------------------- 试一试 */

.mx-scene--shop .mx-shop__try {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 18px;
}

.mx-scene--shop .mx-shop__tryhead { align-self: stretch; }
.mx-scene--shop .mx-shop__trytitle {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
}
.mx-scene--shop .mx-shop__tryhint {
  margin-top: 2px;
  font-size: 16px;
  color: var(--ink-soft);
}

/* 书写格：底色 = 选中的纸，装饰层在 canvas 之下 */
.mx-scene--shop .mx-shop__trypad {
  position: relative;
  width: 240px;
  height: 240px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--card-stroke), var(--shadow-soft);
  transition: background var(--dur-card) var(--ease-out);
}
.mx-scene--shop .mx-shop__trydecor,
.mx-scene--shop .mx-shop__trydecor svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.mx-scene--shop .mx-shop__trycanvas {
  position: relative;
  border-radius: 14px;
}

.mx-scene--shop .mx-shop__trysel {
  min-height: 24px;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.3;
  color: var(--wood-dark);
  text-align: center;
}

/* 墨墨的站位锚点（main 挂在 body 上的墨墨层通过 mascot.moveTo 靠过来，这里只占位）。
   贴着左栏左缘站，气泡往右展开时留在左栏范围内，不压到商品面板 */
.mx-scene--shop .mx-shop__mascot-anchor {
  flex: 1 1 auto;
  align-self: flex-start;
  width: 160px;
  min-height: 120px;
  pointer-events: none;
}

/* ---------------------------------------------------------------- 页签 */

.mx-scene--shop .mx-shop__tabs {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  padding: 4px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper-2) 80%, var(--wood) 20%);
  box-shadow: inset 0 1px 3px rgba(60, 50, 30, .12);
  align-self: flex-start;
}

.mx-scene--shop .mx-shop__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 6px 20px 6px 16px;
  border-radius: 999px;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro), transform 100ms var(--ease-out), box-shadow 100ms;
}
.mx-scene--shop .mx-shop__tab:active { transform: scale(.96); }
.mx-scene--shop .mx-shop__tab:focus-visible { outline: 3px solid var(--sky-accent); outline-offset: 2px; }
.mx-scene--shop .mx-shop__tab.is-active {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--paper), var(--wood-dark) 24%), 0 6px 14px rgba(60, 50, 30, .12);
}
.mx-scene--shop .mx-shop__tabicon { display: inline-flex; width: 22px; height: 22px; }
.mx-scene--shop .mx-shop__tabicon svg { width: 100%; height: 100%; }
.mx-scene--shop .mx-shop__tab.is-active .mx-shop__tabicon { color: var(--coral); }
.mx-scene--shop .mx-shop__tabcount {
  font-size: 15px;
  color: var(--ink-soft);
  opacity: .8;
}

/* ---------------------------------------------------------------- 商品网格 */

.mx-scene--shop .mx-shop__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 6px 6px 12px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  align-content: start;            /* 只有一行时卡片不拉高 */
  perspective: 1200px;             /* 卡片翻转的透视 */
  /* 底边一抹淡出，提示下面还有 */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
}

/* ---------------------------------------------------------------- 商品卡 */

.mx-scene--shop .mx-shop__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 12px;
  border: 1px solid var(--card-stroke);
  border-radius: var(--radius);
  background-color: var(--paper);
  background-image: var(--paper-noise);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transform-style: preserve-3d;
  transition: transform 100ms var(--ease-out), box-shadow 100ms var(--ease-out), border-color var(--dur-micro);
  animation: mx-shop-card-in var(--dur-card) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 35ms);
}
.mx-scene--shop .mx-shop__card:active { transform: scale(.96); box-shadow: 0 2px 8px rgba(60, 50, 30, .08); }
.mx-scene--shop .mx-shop__card:focus-visible { outline: 3px solid var(--sky-accent); outline-offset: 2px; }

/* 试一试里正在用的那件：天蓝描边 */
.mx-scene--shop .mx-shop__card.is-selected {
  border-color: var(--sky-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sky-accent) 45%, transparent), var(--shadow-soft);
}
/* 使用中：绿色描边优先 */
.mx-scene--shop .mx-shop__card.is-equipped {
  border-color: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 40%, transparent), var(--shadow-soft);
}
/* 锁定：预览只是略微褪色、示范笔迹淡一点，纸的颜色（星空纸的深蓝）仍看得见，不灰成一块 */
.mx-scene--shop .mx-shop__card.is-locked .mx-shop__preview { filter: saturate(.7); }
.mx-scene--shop .mx-shop__card.is-locked .mx-shop__previewcanvas { opacity: .45; }

/* 预览区：小纸面，canvas 居中 */
.mx-scene--shop .mx-shop__preview {
  position: relative;
  display: grid;
  place-items: center;
  height: 122px;
  border-radius: 14px;
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--card-stroke);
  overflow: hidden;
}
.mx-scene--shop .mx-shop__preview.is-dark { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.mx-scene--shop .mx-shop__previewcanvas { position: relative; }
.mx-scene--shop .mx-shop__decor,
.mx-scene--shop .mx-shop__decor svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 墨色卡：右下角一枚色块 */
.mx-scene--shop .mx-shop__swatch {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--paper);
  box-shadow: 0 2px 6px rgba(60, 50, 30, .25);
}

/* 等级锁：薄薄一层纸罩在预览上，标签自己带一枚纸色药丸 */
.mx-scene--shop .mx-shop__lockmark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--paper-2) 30%, transparent);
}
.mx-scene--shop .mx-shop__locklabel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  box-shadow: 0 1px 0 var(--card-stroke), var(--shadow-soft);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.2;
}
.mx-scene--shop .mx-shop__lockicon { display: inline-flex; width: 22px; height: 22px; }
.mx-scene--shop .mx-shop__lockicon svg { width: 100%; height: 100%; }

/* 角标：使用中 / 稀有 */
.mx-scene--shop .mx-shop__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  background: var(--ok-text);              /* 白字压 --ok 只有 2.7:1，压 text 档 5:1 */
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.2;
  box-shadow: 0 2px 6px rgba(60, 50, 30, .2);
}
.mx-scene--shop .mx-shop__badgeicon { display: inline-flex; width: 16px; height: 16px; }
.mx-scene--shop .mx-shop__badgeicon svg { width: 100%; height: 100%; }
.mx-scene--shop .mx-shop__badge--rare { background: var(--wisteria); padding-left: 10px; }
.mx-scene--shop .mx-shop__card.is-rare .mx-shop__name { color: color-mix(in srgb, var(--wisteria), var(--ink) 35%); }

.mx-scene--shop .mx-shop__name {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
}
.mx-scene--shop .mx-shop__desc {
  min-height: 24px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* 卡片底部：价格 / 按钮 */
.mx-scene--shop .mx-shop__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  margin-top: auto;
}
.mx-scene--shop .mx-shop__coin { display: inline-flex; width: 22px; height: 22px; flex: 0 0 auto; }
.mx-scene--shop .mx-shop__coin svg { width: 100%; height: 100%; }
.mx-scene--shop .mx-shop__price {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: 20px;
  color: color-mix(in srgb, var(--gold), var(--ink) 35%);
}
.mx-scene--shop .mx-shop__price.is-dim { color: var(--ink-soft); opacity: .6; filter: saturate(.2); }
.mx-scene--shop .mx-shop__short {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--coral-text);
  white-space: nowrap;
}
.mx-scene--shop .mx-shop__using {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--ok-text);
}
.mx-scene--shop .mx-shop__ownedtag {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--ink-soft);
}
.mx-scene--shop .mx-shop__buy { flex: 1 1 auto; }
.mx-scene--shop .mx-shop__buy .mx-btn__icon { width: 22px; height: 22px; }

/* ---------------------------------------------------------------- 购买动效：翻转 + 金色光晕 */

.mx-scene--shop .mx-shop__card.is-flipping {
  animation: mx-shop-flip 600ms ease-in-out both;
  pointer-events: none;
}
.mx-scene--shop .mx-shop__card.is-fresh {
  animation: mx-shop-fresh 1400ms var(--ease-out) both;
}

@keyframes mx-shop-flip {
  0%   { transform: rotateY(0deg) scale(1); }
  50%  { transform: rotateY(90deg) scale(1.04); }
  100% { transform: rotateY(0deg) scale(1); }
}
@keyframes mx-shop-fresh {
  0%   { box-shadow: 0 0 0 4px var(--gold-2), 0 0 26px 8px color-mix(in srgb, var(--gold) 55%, transparent); }
  100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 40%, transparent), var(--shadow-soft); }
}
@keyframes mx-shop-card-in {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ---------------------------------------------------------------- 确认弹窗（挂在 body 下） */

.mx-shop__modal { width: min(100%, 460px); text-align: center; }
.mx-shop__confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.mx-shop__confirm .mx-shop__preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 170px;
  height: 170px;
  border-radius: var(--radius);
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--card-stroke);
  overflow: hidden;
}
.mx-shop__confirm .mx-shop__decor,
.mx-shop__confirm .mx-shop__decor svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mx-shop__confirm .mx-shop__previewcanvas { position: relative; }
.mx-shop__confirm .mx-shop__swatch {
  position: absolute; right: 12px; bottom: 12px; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--paper); box-shadow: 0 2px 6px rgba(60, 50, 30, .25);
}
.mx-shop__confirmdesc { font-size: 17px; color: var(--ink-soft); }
.mx-shop__confirmprice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.1;
  color: color-mix(in srgb, var(--gold), var(--ink) 35%);
}
.mx-shop__confirmprice .mx-shop__coin { display: inline-flex; width: 30px; height: 30px; }
.mx-shop__confirmprice .mx-shop__coin svg { width: 100%; height: 100%; }
.mx-shop__confirmleft { font-size: 16px; color: var(--ink-soft); }
.mx-shop__modal .mx-modal__actions .mx-btn { flex: 1 1 160px; }

/* ---------------------------------------------------------------- 竖屏 / 窄屏：上下堆叠，整页滚动 */

@media (max-width: 860px) {
  .mx-scene--shop .mx-shop__body {
    flex-direction: column;
    overflow-y: auto;
  }
  .mx-scene--shop .mx-shop__side {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: flex-start;
  }
  .mx-scene--shop .mx-shop__try { flex: 0 0 auto; }
  /* 墨墨站在「试一试」卡右边：锚点撑满这一行的高度，脚底与卡片底边齐平（不再是飘在半空的 160px 小块） */
  .mx-scene--shop .mx-shop__mascot-anchor { display: none; }   /* 堆叠布局不出场（shop.js placeMascot 同步隐藏） */
  .mx-scene--shop .mx-shop__goods { flex: 0 0 auto; }
  .mx-scene--shop .mx-shop__grid { overflow: visible; -webkit-mask-image: none; mask-image: none; }
}

@media (max-width: 560px) {
  .mx-scene--shop .mx-shop__side { flex-direction: column; align-items: stretch; }
  .mx-scene--shop .mx-shop__try { align-items: center; }
  .mx-scene--shop .mx-shop__mascot-anchor { display: none; }   /* 手机宽度没地方站，shop.js 也把墨墨藏起来 */
  .mx-scene--shop .mx-shop__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ---------------------------------------------------------------- 减少动效 */

@media (prefers-reduced-motion: reduce) {
  .mx-scene--shop .mx-shop__card { animation: none; }
  .mx-scene--shop .mx-shop__card.is-flipping { animation: none; }
  .mx-scene--shop .mx-shop__card.is-fresh { animation: none; box-shadow: 0 0 0 4px var(--gold-2); }
}