/* PURE 简约款 · EDC 页面专属样式（在 style.css 之上） */
body.pure { --mint: #5eead4; background: #08090a; }
body.pure .card { background: #111315; }

/* ---------- 首屏 ---------- */
.pure-hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: #050607; }
.pure-hero img { position: absolute; right: 0; top: 0; width: 74%; height: 100%; object-fit: cover; object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%); mask-image: linear-gradient(90deg, transparent 0%, #000 24%); }
.pure-hero-copy { position: absolute; left: 6vw; top: 50%; transform: translateY(-50%); z-index: 2; max-width: 520px; }
.pure-hero-copy h1 { font-size: clamp(52px, 7.4vw, 120px); line-height: .95; font-weight: 900; margin: 18px 0; letter-spacing: .02em; }
.pure-hero-copy h1 span { color: transparent; -webkit-text-stroke: 2px #cfd6da; }
.pure-hero-copy p { font-size: 20px; color: var(--ink-2); }

/* ---------- 互动推牌（后片 + 覆盖下部 60% 的前推牌，无螺丝） ---------- */
.play-bg { background: radial-gradient(ellipse at 28% 45%, #11312c 0%, #08090a 62%); }
.edc-lab { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; }
.edc-stage { display: flex; flex-direction: column; align-items: center; }
.edc-row { display: flex; align-items: center; gap: 40px; }
.edc { --b: .6; position: relative; width: 104px; height: 520px; margin-top: 50px; user-select: none; touch-action: none; }
.edc-mouth { position: absolute; left: 26px; right: 26px; top: -38px; height: 42px; border-radius: 8px 8px 3px 3px; background: linear-gradient(90deg, #0d0d0d, #2a2a2a 50%, #0a0a0a); }
.edc-body {
  position: absolute; inset: 0; border-radius: 18px;
  background: linear-gradient(90deg, #2f3337, #474c51 50%, #2b2f33);
  box-shadow: inset 0 0 0 2px #2563eb, 0 30px 60px rgba(0,0,0,.6);
}
.edc-front {
  position: absolute; left: 4px; right: 4px; bottom: 4px; height: 60%; border-radius: 15px; cursor: grab; z-index: 2;
  background:
    repeating-linear-gradient(118deg, rgba(255,255,255,.0) 0 9px, rgba(255,255,255,.13) 9px 11px, rgba(0,0,0,.25) 11px 14px),
    linear-gradient(180deg, #3d4247, #2e3236);
  box-shadow: inset 0 0 0 2px #1d4ed8, 0 6px 14px rgba(0,0,0,.5);
  transform: translateY(0); will-change: transform;
}
.edc-front i { position: absolute; inset: -4px; border-radius: 18px; border: 2px solid transparent; transition: all .35s; pointer-events: none; }
.edc.on .edc-front i { border-color: rgba(94,234,212, calc(.35 + var(--b) * .65)); box-shadow: 0 0 calc(6px + var(--b) * 26px) rgba(94,234,212, var(--b)); }
.edc-front.snap { transition: transform .18s cubic-bezier(.3,1.6,.5,1); }
.edc-front:active { cursor: grabbing; }
.edc-air {
  position: absolute; left: -9px; top: 40px; width: 10px; height: 34px; border-radius: 4px; cursor: pointer;
  background: #0b0c0d; border: 1px solid #2563eb; padding: 0;
}
.edc-air::after { content: ""; position: absolute; left: 1px; right: 1px; height: 10px; top: var(--air, 11px); border-radius: 2px; background: #9aa1a5; transition: top .15s; }
.edc-lever {
  position: absolute; right: -14px; top: 92px; width: 14px; height: 40px; border-radius: 6px; cursor: pointer; padding: 0;
  background: repeating-linear-gradient(0deg, #9aa1a5 0 2px, #5d6367 2px 4px); border: 1px solid #2c3033;
  transition: transform .09s;
}
.edc-lever.tick { transform: translateY(5px) rotate(4deg); }
.edc-dots { width: 150px; border-radius: 14px; background: #0a0b0c; border: 1px solid var(--line-2); padding: 14px; text-align: center; }
.edc-dots span { display: block; font-size: 11px; color: var(--ink-3); margin-bottom: 10px; }
.edc-dots b { display: block; font-family: var(--mono); font-size: 22px; letter-spacing: .12em; color: #2a3a3a;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px); background-size: 6px 6px; padding: 10px 0; border-radius: 8px; transition: color .3s; }
.edc.on ~ .edc-dots b, .edc-dots.on b { color: var(--mint); text-shadow: 0 0 8px rgba(94,234,212,.6); }
.edc-hint { margin-top: 28px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); letter-spacing: .1em; text-align: center; }
.edc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.edc-stats .rpm { font-size: 46px; }
.edc-stats .rpm small { font-size: 11px; }
.edc-stats .sub { font-size: 13px; margin-top: 4px; }

.swatches.four { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 760px) {
  .pure-hero img { width: 100%; object-position: 55% 60%; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%); mask-image: linear-gradient(180deg, transparent 0%, #000 45%); }
  .pure-hero-copy { top: 10vh; transform: none; right: 6vw; }
  .pure-hero-copy h1 { font-size: 46px; }
  .pure-hero-copy p { font-size: 15px; }
  .edc-lab { grid-template-columns: 1fr; gap: 30px; }
  .edc-row { gap: 24px; }
  .edc { transform: scale(.82); transform-origin: top center; margin-bottom: -90px; }
  .edc-dots { width: 120px; }
  .edc-stats { grid-template-columns: repeat(2, 1fr); }
  .edc-stats .rpm { font-size: 34px; }
  .swatches.four { grid-template-columns: repeat(2, 1fr); }
}