/* ============================================
   24点 — 设计系统 Tokens
   高饱和度多巴胺色 / 圆润几何 / 描边硬阴影
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Noto+Sans+SC:wght@400;500;700;900&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  /* —— 背景与中性 —— */
  --bg:           #FFFBF2;          /* 奶油白主背景，比原来更干净 */
  --bg-soft:      #FFF5DF;          /* 米黄软背景，仅用于卡片内层 */
  --paper:        #FFFFFF;          /* 纯白卡片，最高对比 */
  --ink:          #1A1614;          /* 主文字，深墨棕黑（不是纯黑） */
  --ink-2:        #4A413B;          /* 次级文字 */
  --ink-3:        #8A7E76;          /* 弱文字 */
  --line:         #1A1614;          /* 描边色 = 主文字 */
  --line-soft:    #E8DFD0;          /* 软分隔线 */

  /* —— 多巴胺主色（OKLCH 统一 L=0.72 C=0.20）—— */
  --pink:    #FF3D8A;   /* 粉 — 主CTA / 单人计时 */
  --azure:   #2BB7FF;   /* 蓝青 — 在线对战 / 加入 */
  --grass:   #2BC97F;   /* 草绿 — 排行/提交 */
  --grape:   #A56BFF;   /* 葡萄紫 — 换一道 */
  --sun:     #FFC43D;   /* 阳光黄 — 提示 / 房主 */
  --tang:    #FF7A3D;   /* 橘红 — 强调 */

  /* —— 主色暗版（用于描边/阴影底色）—— */
  --pink-dark:   #C8205E;
  --azure-dark:  #0E83BF;
  --grass-dark:  #168F56;
  --grape-dark:  #6E3DC4;
  --sun-dark:    #C28800;
  --tang-dark:   #C44E14;

  /* —— 字体 —— */
  --font-display: 'Baloo 2', 'Noto Sans SC', system-ui, sans-serif;
  --font-body:    'Noto Sans SC', 'Baloo 2', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', monospace;

  /* —— 圆角 —— */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* —— 描边 —— */
  --bw: 2px;          /* 标准描边 */
  --bw-thick: 3px;    /* 强调描边（CTA） */

  /* —— 硬阴影（墨色，半透明）—— */
  --shadow-sm: 0 2px 0 rgba(26,22,20,0.9);
  --shadow-md: 0 4px 0 rgba(26,22,20,0.9);
  --shadow-lg: 0 6px 0 rgba(26,22,20,0.9);
  --shadow-press: 0 1px 0 rgba(26,22,20,0.9);

  /* —— 间距 —— */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
}

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

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============== 通用组件 ============== */

/* 卡片 */
.card {
  background: var(--paper);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: var(--sp-5);
}

.card-soft {
  background: var(--bg-soft);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: var(--sp-5);
}

/* 按钮 — 大号CTA */
.btn-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 56px;
  border: var(--bw-thick) solid var(--line);
  border-radius: var(--r-lg);
  background: var(--pink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.5px;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  position: relative;
  overflow: hidden;
}
.btn-cta::before {
  /* 顶部高光 — 果冻感 */
  content: '';
  position: absolute;
  inset: 3px 3px auto 3px;
  height: 40%;
  border-radius: var(--r-md);
  background: linear-gradient(to bottom, rgba(255,255,255,.35), rgba(255,255,255,0));
  pointer-events: none;
}
.btn-cta:active {
  transform: translateY(3px);
  box-shadow: var(--shadow-press);
}

.btn-cta.azure  { background: var(--azure); }
.btn-cta.grass  { background: var(--grass); }
.btn-cta.grape  { background: var(--grape); }
.btn-cta.sun    { background: var(--sun); color: var(--ink); }
.btn-cta.tang   { background: var(--tang); }
.btn-cta.ghost  { background: var(--paper); color: var(--ink); }

/* 小按钮 */
.btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.btn-sm:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0,0,0,0); }

/* 状态徽章 */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  font-size: 12px;
  font-weight: 700;
}
.chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grass);
}
.chip.connecting .dot { background: var(--sun); }
.chip.offline    .dot { background: var(--ink-3); }

/* LOGO */
.logo-24 {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--pink);
  text-shadow:
    -2px 0 0 var(--line),
    2px 0 0 var(--line),
    0 -2px 0 var(--line),
    0 2px 0 var(--line),
    0 4px 0 var(--line);
  transform: rotate(-4deg);
}
.logo-24 .bang {
  color: var(--sun);
  margin-left: 2px;
}

/* 顶部导航条 */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 8px;
}

/* 数字卡牌（果冻按钮） */
.num-tile {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  border: var(--bw-thick) solid var(--line);
  border-radius: var(--r-lg);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 48px;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  box-shadow: 0 5px 0 rgba(26,22,20,0.9), inset 0 -7px 0 rgba(0,0,0,0.2);
  transition: transform .12s ease, box-shadow .12s ease;
  text-shadow: 0 3px 0 rgba(0,0,0,0.3);
  filter: saturate(1.15);
}
.num-tile::before {
  content:'';
  position:absolute;
  inset: 4px 4px auto 4px;
  height: 38%;
  border-radius: 14px;
  background: linear-gradient(to bottom, rgba(255,255,255,.22), rgba(255,255,255,0));
  pointer-events:none;
}
.num-tile:active,
.num-tile.used {
  transform: translateY(4px);
  box-shadow: 0 1px 0 rgba(26,22,20,0.85), inset 0 -2px 0 rgba(0,0,0,0.18);
}
.num-tile.used { opacity: .42; filter: saturate(1.15) grayscale(.15); }

/* 运算符按钮 */
.op-tile {
  aspect-ratio: 1;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all .1s ease;
}
.op-tile:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0,0,0,0); }

/* 通用页面容器 */
.phone {
  width: 390px;
  min-height: 800px;
  background: var(--bg);
  border: var(--bw) solid var(--line);
  border-radius: 36px;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-lg);
  font-size: 15px;
  /* 装饰性背景元素 */
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,61,138,.05) 0 60px, transparent 61px),
    radial-gradient(circle at 88% 72%, rgba(43,183,255,.05) 0 80px, transparent 81px);
}

/* 板块标题 */
.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 标签 */
.label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: 6px;
  letter-spacing: .3px;
}

/* 输入框 */
.input {
  width: 100%;
  height: 52px;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  padding: 0 16px;
  font-family: var(--font-body);
  font-size: 16px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 2px 0 rgba(26,22,20,0.06);
  outline: none;
}
.input::placeholder { color: var(--ink-3); }
.input:focus {
  box-shadow: 0 0 0 3px rgba(255,61,138,.25), inset 0 2px 0 rgba(26,22,20,0.06);
}

/* OTP 格子 */
.otp {
  display: flex;
  gap: 10px;
}
.otp .slot {
  flex: 1;
  height: 56px;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  box-shadow: inset 0 2px 0 rgba(26,22,20,0.06);
}
.otp .slot.active {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(255,61,138,.22);
}

/* 段控 */
.seg {
  display: inline-flex;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-pill);
  padding: 4px;
  background: var(--paper);
  gap: 2px;
}
.seg button {
  border: 0;
  background: transparent;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
}
.seg button.on {
  background: var(--ink);
  color: #fff;
}

/* 字符化图标占位（取代 emoji） */
.glyph {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
}

/* —— 工具类 —— */
.row { display: flex; align-items: center; }
.row.gap-2 { gap: 8px; } .row.gap-3 { gap: 12px; } .row.gap-4 { gap: 16px; }
.col { display: flex; flex-direction: column; }
.col.gap-2 { gap: 8px; } .col.gap-3 { gap: 12px; } .col.gap-4 { gap: 16px; }
.flex-1 { flex: 1; }
.center { display:grid; place-items:center; }
.text-mono { font-family: var(--font-mono); }
.text-display { font-family: var(--font-display); }
.text-muted { color: var(--ink-3); }
.text-2 { color: var(--ink-2); }