/**
 * 猫咖页样式 —— 与小程序 `miniprogram/pages/cafe/index.wxss` 同一家店。
 *
 * ## 色板为什么抄一份
 *
 * 纸片风的 `--paper-*` 真身在小程序 `app.wxss`（`page` 选择器里），Web 端没有
 * 那份文件（`living.css` 是 `index.wxss` 的转换产物，不含 `app.wxss` 的变量定义）。
 * 所以这里显式写一次同样的色值 —— 「抄两份必有一份过期」由
 * `npm run check:cafe-palette` 双向盯着，不靠人记得同步改。
 *
 * 尺寸：小程序那份按 750rpx 设计（内容宽 686rpx）；这里按 **1rpx = 0.5px** 换算成
 * 固定店铺尺寸（343×230），桌面端居中，不再随宽度变形 —— 店的陈设是摆好的，
 * 拉伸只会让柜台和猫的相对位置走样。
 */

:root {
  color-scheme: light;
  --cf-paper-bg: #e4d4b6;
  --cf-paper-fill: #f0e2c8;
  --cf-paper-ink: #3b2f22;
  --cf-paper-accent: #c86f52;
  --cf-paper-accent-deep: #d9896c;
  --cf-paper-shadow: rgba(58, 42, 24, 0.22);
  --cf-paper-glass: #9ec4d8;
  --cf-paper-glass-lite: #cfe3ef;
  --cf-paper-wood: #c9ae8c;
  --cf-paper-wood-deep: #b89772;
  --cf-paper-cast: rgba(59, 47, 34, 0.38);

  /* 店内专有色：不属于纸片色板，改这里不用同步小程序 */
  --cf-wall: #e8d6bb;
  --cf-board: #4a3b2c;

  /* 毛色：键来自 living-stage/core 的 furColorForBreed，值是这里的表现层 */
  --cf-fur: #e8a33d;
}

[data-fur='orange'] { --cf-fur: #e8a33d; }
[data-fur='gray']   { --cf-fur: #9aa0a6; }
[data-fur='white']  { --cf-fur: #f2ece2; }
[data-fur='black']  { --cf-fur: #4a4038; }

[hidden] { display: none !important; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cf-paper-bg);
  color: var(--cf-paper-ink);
  font: 14px/1.6 system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ── 顶栏 ─────────────────────────────────────────────────────── */

.cf-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 2px solid var(--cf-paper-ink);
  background: var(--cf-paper-fill);
}

.cf-back {
  color: var(--cf-paper-ink);
  text-decoration: none;
  font-weight: 600;
}

.cf-title {
  font-weight: 700;
  letter-spacing: 0.08em;
}

.cf-tag {
  font-size: 12px;
  opacity: 0.7;
}

.cf-page {
  max-width: 420px;
  margin: 0 auto;
  padding: 16px 16px 40px;
}

.cf-sub {
  margin: 0 0 12px;
  font-size: 13px;
  opacity: 0.78;
  min-height: 20px;
}

/* ── 店 ───────────────────────────────────────────────────────── */

.cf-shop {
  position: relative;
  width: 343px;
  height: 230px;
  margin: 0 auto 16px;
  overflow: hidden;
  background: var(--cf-paper-wood);
  border: 2px solid var(--cf-paper-ink);
}

.cf-shop-wall {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 160px;
  background: var(--cf-wall);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(59, 47, 34, 0.08) 0 2px,
    rgba(59, 47, 34, 0) 2px 17px
  );
}

.cf-floor {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 75px;
  background: var(--cf-paper-wood-deep);
  background-image: repeating-linear-gradient(
    0deg,
    rgba(59, 47, 34, 0.14) 0 1.5px,
    rgba(59, 47, 34, 0) 1.5px 23px
  );
}

.cf-window {
  position: absolute;
  left: 23px;
  top: 22px;
  width: 88px;
  height: 66px;
}

.cf-window-glass {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--cf-paper-glass-lite) 0%, var(--cf-paper-glass) 100%);
  border: 1.5px solid var(--cf-paper-ink);
}

.cf-window-bar {
  position: absolute;
  background: var(--cf-paper-wood);
}

.cf-window-bar-v {
  left: 50%;
  top: 0;
  width: 3px;
  height: 100%;
  margin-left: -1.5px;
}

.cf-window-bar-h {
  left: 0;
  top: 50%;
  width: 100%;
  height: 3px;
  margin-top: -1.5px;
}

.cf-window-sill {
  position: absolute;
  left: -6px;
  bottom: -6px;
  width: 100px;
  height: 6px;
  background: var(--cf-paper-wood-deep);
  border: 1px solid var(--cf-paper-ink);
}

.cf-menu {
  position: absolute;
  right: 23px;
  top: 24px;
  width: 75px;
  height: 58px;
  padding: 6px 7px;
  background: var(--cf-board);
  border: 1.5px solid var(--cf-paper-ink);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cf-menu-title {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--cf-paper-fill);
}

.cf-menu-line {
  width: 100%;
  height: 2.5px;
  background: rgba(240, 226, 200, 0.6);
}

.cf-lamp {
  position: absolute;
  left: 50%;
  top: 0;
  width: 60px;
  margin-left: -30px;
  opacity: 0.45;
  transition: opacity 240ms ease;
}

.cf-lamp.is-on { opacity: 1; }

.cf-lamp-cord {
  width: 2px;
  height: 28px;
  margin: 0 auto;
  background: var(--cf-paper-ink);
}

.cf-lamp-shade {
  width: 48px;
  height: 22px;
  margin: 0 auto;
  background: var(--cf-paper-accent);
  border: 1.5px solid var(--cf-paper-ink);
  clip-path: polygon(24% 0%, 76% 0%, 100% 100%, 0% 100%);
}

.cf-lamp-light {
  width: 75px;
  height: 75px;
  margin: -3px auto 0;
  background: radial-gradient(circle at 50% 0%, rgba(255, 226, 150, 0.5) 0%, rgba(255, 226, 150, 0) 68%);
}

.cf-counter {
  position: absolute;
  left: 32px;
  bottom: 13px;
  width: 279px;
  height: 75px;
  z-index: 5;
}

.cf-counter-top {
  position: absolute;
  left: -5px;
  top: 0;
  width: 289px;
  height: 13px;
  background: var(--cf-paper-wood);
  border: 1.5px solid var(--cf-paper-ink);
}

.cf-counter-panel {
  position: absolute;
  left: 0;
  top: 13px;
  width: 100%;
  height: 62px;
  background: var(--cf-paper-wood-deep);
  border: 1.5px solid var(--cf-paper-ink);
  border-top: none;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(59, 47, 34, 0.16) 0 1.5px,
    rgba(59, 47, 34, 0) 1.5px 45px
  );
}

.cf-cup {
  position: absolute;
  z-index: 6;
}

.cf-cup-a { left: 54px; bottom: 86px; }
.cf-cup-b { left: 235px; bottom: 88px; }

.cf-cup-body {
  width: 26px;
  height: 23px;
  background: var(--cf-paper-fill);
  border: 1.5px solid var(--cf-paper-ink);
  clip-path: polygon(8% 0%, 92% 0%, 84% 100%, 16% 100%);
}

.cf-cup-handle {
  position: absolute;
  right: -6px;
  top: 6px;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--cf-paper-ink);
  border-left: none;
  border-radius: 0 8px 8px 0;
}

.cf-steam {
  position: absolute;
  left: 7px;
  width: 4px;
  height: 13px;
  background: rgba(59, 47, 34, 0.22);
  animation: cf-steam 2.6s ease-in-out infinite;
}

.cf-steam-1 { bottom: 22px; }
.cf-steam-2 { left: 15px; bottom: 22px; animation-delay: 1.1s; }

@keyframes cf-steam {
  0%   { transform: translateY(0) scaleY(0.6); opacity: 0; }
  35%  { opacity: 0.75; }
  100% { transform: translateY(-11px) scaleY(1.1); opacity: 0; }
}

/* 客人：站在柜台前，下半身被柜台挡住 */
.cf-guest {
  position: absolute;
  bottom: 12px;
  width: 48px;
  z-index: 4;
}

.cf-guest-a { left: 48px; }
.cf-guest-b { left: 226px; }

.cf-guest-head {
  width: 24px;
  height: 24px;
  margin: 0 auto;
  background: var(--cf-paper-fill);
  border: 1.5px solid var(--cf-paper-ink);
  border-radius: 50%;
}

.cf-guest-body {
  width: 48px;
  height: 75px;
  margin-top: -3px;
  background: var(--cf-paper-glass-lite);
  border: 1.5px solid var(--cf-paper-ink);
  clip-path: polygon(22% 0%, 78% 0%, 100% 100%, 0% 100%);
}

/* 猫 —— 站在台面上迎客 */
.cf-cat {
  position: absolute;
  left: 122px;
  bottom: 86px;
  width: 100px;
  height: 95px;
  z-index: 7;
  animation: cf-breathe 3.4s ease-in-out infinite;
}

.cf-cat-body {
  position: absolute;
  left: 26px;
  bottom: 0;
  width: 48px;
  height: 42px;
  background: var(--cf-fur);
  border: 1.5px solid var(--cf-paper-ink);
  clip-path: polygon(18% 0%, 82% 0%, 100% 100%, 0% 100%);
}

.cf-cat-apron {
  position: absolute;
  left: 30px;
  bottom: 0;
  width: 40px;
  height: 26px;
  background: var(--cf-paper-fill);
  border: 1.5px solid var(--cf-paper-ink);
  clip-path: polygon(16% 0%, 84% 0%, 100% 100%, 0% 100%);
}

.cf-cat-head {
  position: absolute;
  left: 24px;
  bottom: 34px;
  width: 52px;
  height: 46px;
  background: var(--cf-fur);
  border: 1.5px solid var(--cf-paper-ink);
  border-radius: 50% 50% 46% 46%;
}

.cf-cat-ear {
  position: absolute;
  top: -11px;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 15px solid var(--cf-fur);
}

.cf-cat-ear-l { left: 2px; transform: rotate(-8deg); }
.cf-cat-ear-r { right: 2px; transform: rotate(8deg); }

.cf-cat-eye {
  position: absolute;
  top: 20px;
  width: 5px;
  height: 7px;
  background: var(--cf-paper-ink);
  border-radius: 50%;
  animation: cf-blink 5.2s ease-in-out infinite;
}

.cf-cat-eye-l { left: 12px; }
.cf-cat-eye-r { right: 12px; }

.cf-cat-muzzle {
  position: absolute;
  left: 50%;
  top: 30px;
  width: 14px;
  height: 8px;
  margin-left: -7px;
  background: var(--cf-paper-fill);
  border: 1.5px solid var(--cf-paper-ink);
  border-radius: 50%;
  opacity: 0.9;
}

.cf-cat-tail {
  position: absolute;
  right: 18px;
  bottom: 2px;
  width: 8px;
  height: 34px;
  background: var(--cf-fur);
  border: 1.5px solid var(--cf-paper-ink);
  border-radius: 4px;
  transform-origin: 50% 100%;
  animation: cf-tail 2.8s ease-in-out infinite;
}

@keyframes cf-tail {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(10deg); }
}

@keyframes cf-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.5px); }
}

@keyframes cf-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.15); }
}

.cf-closed {
  position: absolute;
  left: 100px;
  bottom: 93px;
  width: 146px;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 5px;
  background: var(--cf-paper-fill);
  border: 1.5px solid var(--cf-paper-ink);
  transform: rotate(-3deg);
}

.cf-closed-text {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.cf-closed-sub {
  font-size: 11px;
  opacity: 0.7;
}

/* ── 班次卡 ───────────────────────────────────────────────────── */

.cf-card {
  max-width: 343px;
  margin: 0 auto;
  padding: 14px 16px;
  background: var(--cf-paper-fill);
  border: 2px solid var(--cf-paper-ink);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cf-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cf-card-head h2 {
  margin: 0;
  font-size: 16px;
}

.cf-chip {
  padding: 3px 8px;
  font-size: 12px;
  background: var(--cf-paper-accent);
  color: var(--cf-paper-fill);
  border: 1px solid var(--cf-paper-ink);
}

.cf-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cf-progress-track {
  flex: 1;
  height: 9px;
  background: rgba(59, 47, 34, 0.14);
  border: 1px solid var(--cf-paper-ink);
}

.cf-progress-fill {
  height: 100%;
  width: 0;
  background: var(--cf-paper-accent);
}

.cf-progress-text {
  font-size: 11px;
  opacity: 0.75;
  min-width: 70px;
  text-align: right;
}

.cf-durations {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cf-dur-label {
  font-size: 11px;
  opacity: 0.7;
}

.cf-dur-row {
  display: flex;
  gap: 6px;
}

.cf-dur {
  flex: 1;
  padding: 6px 0;
  font: inherit;
  font-size: 12px;
  background: var(--cf-paper-fill);
  color: var(--cf-paper-ink);
  border: 1.5px solid var(--cf-paper-ink);
  cursor: pointer;
}

.cf-dur.is-on {
  background: var(--cf-paper-accent);
  color: var(--cf-paper-fill);
  font-weight: 700;
}

.cf-actions {
  display: flex;
}

.cf-btn {
  flex: 1;
  padding: 10px 0;
  font: inherit;
  font-size: 15px;
  background: var(--cf-paper-fill);
  color: var(--cf-paper-ink);
  border: 2px solid var(--cf-paper-ink);
  cursor: pointer;
}

.cf-btn-primary {
  background: var(--cf-paper-accent);
  color: var(--cf-paper-fill);
  font-weight: 700;
}

.cf-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.cf-note {
  margin: 0;
  font-size: 11px;
  opacity: 0.6;
}

.cf-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  padding: 10px 16px;
  background: var(--cf-paper-ink);
  color: var(--cf-paper-fill);
  font-size: 13px;
}