/* ============================================================
   style.css — 计算器样式
   设计语言：深色底 + 炭灰机身 + 暖橙点缀
   圆角、层次阴影、立体按键，hover / 按压动效自然流畅
   ============================================================ */

/* ---------- 设计变量 ---------- */
:root {
  --bg: #0e1116;
  --glow-blue: rgba(74, 110, 190, 0.16);
  --glow-orange: rgba(255, 140, 0, 0.10);

  --card-bg: linear-gradient(180deg, #222733, #1b1f28);
  --card-border: rgba(255, 255, 255, 0.08);

  --display-bg: #12151b;
  --display-border: rgba(255, 255, 255, 0.06);

  --text: #f4f6fa;
  --text-dim: #98a1b3;
  --danger: #ff8a80;

  --digit-bg: #323745;
  --digit-hover: #3c4252;
  --digit-active: #2b2f3b;

  --fn-bg: #464d5d;
  --fn-hover: #545c6e;
  --fn-active: #3d4452;

  --clear-bg: #74323c;
  --clear-hover: #8a3c47;
  --clear-active: #622a33;

  --op-bg: #e8962e;
  --op-hover: #ffac4f;
  --op-active: #c97f1f;
  --op-pending: #ffb35c;

  --eq-from: #ffb648;
  --eq-to: #ff8a00;
  --eq-glow: rgba(255, 138, 0, 0.38);

  --radius-card: 28px;
  --radius-display: 18px;
  --radius-key: 16px;

  --key-shadow: 0 4px 0 rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --key-shadow-pressed: 0 1px 0 rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ---------- 基础 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1100px 700px at 18% -12%, var(--glow-blue), transparent 60%),
    radial-gradient(900px 650px at 112% 112%, var(--glow-orange), transparent 62%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ---------- 机身 ---------- */
.calculator {
  width: min(392px, calc(100vw - 32px));
  padding: 22px;
  border-radius: var(--radius-card);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow:
    0 30px 60px -18px rgba(0, 0, 0, 0.6),
    0 10px 24px -12px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  animation: rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ---------- 显示区 ---------- */
.display {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 8px;
  min-height: 116px;
  padding: 14px 18px 12px;
  border-radius: var(--radius-display);
  background: var(--display-bg);
  border: 1px solid var(--display-border);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

/* 历史算式行（右对齐） */
.display__expression {
  min-height: 20px;
  font-size: 15px;
  line-height: 20px;
  color: var(--text-dim);
  text-align: right;
  white-space: nowrap;
}

/* 当前数值：清晰大字、右对齐、等宽数字 */
.display__value {
  font-size: 52px;
  font-weight: 300;
  line-height: 1.1;
  text-align: right;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;            /* 超长时仍可滚动查看，但隐藏滚动条 */
  transition: font-size 0.12s ease;
}

.display__value::-webkit-scrollbar { display: none; }

/* 错误提示样式 */
.display__value.error-value {
  font-size: 27px !important;
  font-weight: 500;
  color: var(--danger);
}

/* 错误抖动动画 */
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

.display.shake {
  animation: shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* ---------- 按键区 ---------- */
.keypad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 18px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* 按键基础：立体键帽效果（底边硬阴影 + 顶部高光） */
.key {
  position: relative;
  overflow: hidden;
  height: 64px;
  border: none;
  border-radius: var(--radius-key);
  font-family: inherit;
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--text);
  background: var(--digit-bg);
  cursor: pointer;
  box-shadow: var(--key-shadow);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background-color 0.16s ease,
    filter 0.16s ease;
}

/* 标签浮于水波纹之上 */
.key .label {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

/* 悬停：微抬 + 提亮（仅鼠标设备） */
@media (hover: hover) {
  .key:hover {
    background-color: var(--digit-hover);
    transform: translateY(-2px);
    filter: brightness(1.06);
  }
}

/* 按压：下沉 + 阴影收缩，模拟实体键按下去 */
.key:active,
.key.pressed {
  background-color: var(--digit-active);
  transform: translateY(3px) scale(0.97);
  box-shadow: var(--key-shadow-pressed);
  filter: brightness(0.96);
}

/* 数字键 0 占两格 */
.key.zero { grid-column: span 2; }

/* ---------- 功能键（C / ± / ←）：蓝灰 ---------- */
.key.fn {
  background: var(--fn-bg);
  color: #f7f9fc;
  font-weight: 600;
}
@media (hover: hover) { .key.fn:hover { background-color: var(--fn-hover); } }
.key.fn:active, .key.fn.pressed { background-color: var(--fn-active); }

/* 清空键：暗红警示色，与普通功能键区分 */
.key.clear { background: var(--clear-bg); }
@media (hover: hover) { .key.clear:hover { background-color: var(--clear-hover); } }
.key.clear:active, .key.clear.pressed { background-color: var(--clear-active); }

/* ---------- 运算符：暖橙 ---------- */
.key.op {
  background: var(--op-bg);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
}
@media (hover: hover) { .key.op:hover { background-color: var(--op-hover); } }
.key.op:active, .key.op.pressed { background-color: var(--op-active); }

/* 待输入运算符高亮（按下运算符后直到输入数字） */
.key.op.pending {
  background: var(--op-pending);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.28), var(--key-shadow);
  transform: translateY(-2px);
}

/* ---------- 等于键：渐变 + 辉光 ---------- */
.key.equals {
  background: linear-gradient(135deg, var(--eq-from), var(--eq-to));
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  box-shadow: 0 6px 18px -4px var(--eq-glow), 0 4px 0 rgba(122, 62, 0, 0.55);
}
@media (hover: hover) {
  .key.equals:hover {
    filter: brightness(1.1) saturate(1.05);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -4px var(--eq-glow), 0 4px 0 rgba(122, 62, 0, 0.55);
  }
}
.key.equals:active, .key.equals.pressed {
  filter: brightness(0.95);
  transform: translateY(3px) scale(0.97);
  box-shadow: 0 1px 0 rgba(122, 62, 0, 0.55);
}

/* 焦点可见性（无障碍） */
.key:focus-visible {
  outline: 2px solid var(--op-pending);
  outline-offset: 2px;
}

/* ---------- 点击水波纹 ---------- */
.ripple {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  transform: scale(0);
  animation: ripple 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes ripple {
  to { transform: scale(3.2); opacity: 0; }
}

/* ---------- 入场动画 ---------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- 底部提示 ---------- */
.hint {
  margin-top: 22px;
  font-size: 12.5px;
  letter-spacing: 0.4px;
  color: rgba(152, 161, 179, 0.55);
  text-align: center;
}

/* ---------- 小屏 / 矮屏适配 ---------- */
@media (max-width: 420px) {
  .calculator { padding: 16px; }
  .key { height: 56px; }
  .keypad { gap: 10px; margin-top: 14px; }
  .display { min-height: 100px; padding: 10px 14px; }
}

@media (max-height: 720px) {
  .key { height: 52px; }
  .display { min-height: 92px; }
  .keypad { gap: 10px; margin-top: 12px; }
}

/* ---------- 减少动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}