/* ============================================================
   瓜瓜密码机 · GUAGUA DECODER
   透明电子密码机视觉：烟灰半透明外壳 / 黑色面板 / 树脂按键 / 暖色内光
   ============================================================ */

:root {
  --amber: #ffb050;
  --amber-dim: rgba(255, 176, 80, 0.55);
  --ink: #e8eaee;
}

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

html, body { height: 100%; }

body {
  background:
    radial-gradient(130% 90% at 50% -10%, #15181f 0%, #08090c 62%) fixed;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  display: flex;
  justify-content: center;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.stage {
  width: 100%;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  overflow: auto;
}

/* ---------------- 机身外壳 ---------------- */

.device {
  --slot: min(13vw, 8.4dvh);
  position: relative;
  width: min(420px, 100%);
  max-height: 100%;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 14px 18px;
  border-radius: 44px;
  overflow: hidden;
  background:
    radial-gradient(150% 55% at 50% -12%, rgba(255, 176, 80, 0.16), transparent 60%),
    radial-gradient(130% 45% at 50% 116%, rgba(255, 150, 45, 0.13), transparent 62%),
    radial-gradient(60% 30% at -8% 55%, rgba(255, 170, 70, 0.07), transparent 70%),
    radial-gradient(60% 30% at 108% 40%, rgba(255, 170, 70, 0.06), transparent 70%),
    linear-gradient(165deg, rgba(92, 95, 104, 0.62) 0%, rgba(44, 46, 53, 0.74) 46%, rgba(26, 28, 33, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.28),
    inset 0 -3px 8px rgba(0, 0, 0, 0.5),
    inset 2px 0 3px rgba(255, 255, 255, 0.05),
    inset -2px 0 3px rgba(255, 255, 255, 0.05),
    0 28px 70px rgba(0, 0, 0, 0.65),
    0 4px 16px rgba(0, 0, 0, 0.5);
}

/* 隐约的 PCB / 电路纹理 */
.device::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.024) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 26px),
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.05) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 30%, rgba(255, 255, 255, 0.04) 0 2px, transparent 3px),
    radial-gradient(circle at 12% 78%, rgba(255, 255, 255, 0.04) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 86%, rgba(255, 255, 255, 0.05) 0 2px, transparent 3px);
}

/* 成功时机身内部暖光响应 */
.device.party::before {
  animation: partyglow 1.5s ease;
}
@keyframes partyglow {
  0%, 100% { background-color: transparent; }
  35% { background-color: rgba(255, 150, 40, 0.12); }
}

/* 螺丝 */
.screw {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #71747c, #2b2d33 72%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.65);
  z-index: 1;
}
.screw::after {
  content: '';
  position: absolute;
  left: 1.5px;
  right: 1.5px;
  top: 4.5px;
  height: 1.6px;
  border-radius: 1px;
  background: rgba(0, 0, 0, 0.65);
  transform: rotate(38deg);
}
.screw.tl { top: 12px; left: 12px; }
.screw.tr { top: 12px; right: 12px; }
.screw.bl { bottom: 12px; left: 12px; }
.screw.br { bottom: 12px; right: 12px; }

/* 内部暖色 LED */
.led {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffb050;
  box-shadow: 0 0 7px 2px rgba(255, 165, 55, 0.55);
  opacity: 0.75;
  animation: ledblink 4.2s infinite;
  z-index: 1;
}
.led.l1 { top: 64px; left: 7px; animation-delay: 0s; }
.led.l2 { top: 40%; right: 7px; animation-delay: 1.3s; }
.led.l3 { bottom: 32%; left: 7px; animation-delay: 2.4s; }
.led.l4 { bottom: 90px; right: 7px; animation-delay: 0.7s; }
@keyframes ledblink {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 0.25; }
}
.device.party .led { animation: ledparty 0.36s ease 4; }
@keyframes ledparty {
  50% { opacity: 1; box-shadow: 0 0 12px 4px rgba(255, 175, 70, 0.9); }
}

/* 顶部灯条 */
.lightbar {
  align-self: center;
  width: 34%;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, #ffc270 18%, #ffe2b0 50%, #ffc270 82%, transparent);
  box-shadow: 0 0 12px 2px rgba(255, 175, 70, 0.55);
  margin-top: -4px;
  z-index: 1;
}
.device.party .lightbar { animation: barparty 0.36s ease 4; }
@keyframes barparty {
  50% { box-shadow: 0 0 22px 6px rgba(255, 185, 90, 0.95); filter: brightness(1.5); }
}

/* 顶部队标区 */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 2px 12px 0;
  z-index: 1;
}
.brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
}
.motto {
  font-size: 9px;
  letter-spacing: 2px;
  line-height: 1.7;
  text-align: right;
  color: rgba(255, 255, 255, 0.32);
}

/* ---------------- 主棋盘 ---------------- */

.board {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px 12px;
  border-radius: 22px;
  background: linear-gradient(180deg, #111318 0%, #0a0c0f 100%);
  box-shadow:
    inset 0 3px 10px rgba(0, 0, 0, 0.85),
    inset 0 -1px 1px rgba(255, 255, 255, 0.05),
    0 1px 0 rgba(255, 255, 255, 0.07);
}

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

.rownum {
  width: 15px;
  flex: none;
  text-align: right;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 190, 110, 0.5);
  transition: color 0.25s;
}
.row.active .rownum { color: var(--amber); text-shadow: 0 0 8px rgba(255, 176, 80, 0.6); }

.slots {
  display: grid;
  grid-template-columns: repeat(4, var(--slot));
  gap: 7px;
}

/* 密码槽：厚透明树脂按键 */
.slot {
  position: relative;
  width: var(--slot);
  height: var(--slot);
  border-radius: 24%;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background:
    radial-gradient(130% 90% at 30% 12%, rgba(255, 255, 255, 0.09), transparent 46%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.05) 0%, rgba(12, 14, 18, 0.62) 55%, rgba(6, 7, 9, 0.72) 100%);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.13),
    inset 0 -3px 6px rgba(0, 0, 0, 0.62),
    0 1px 2px rgba(0, 0, 0, 0.45);
  transition: border-color 0.2s, box-shadow 0.2s;
  overflow: hidden;
}

/* 当前行：待填槽的暖色描边 */
.row.active .slot:not(.filled) {
  border-color: rgba(255, 185, 100, 0.38);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.13),
    inset 0 -3px 6px rgba(0, 0, 0, 0.62),
    0 0 10px rgba(255, 176, 80, 0.14);
}
/* 下一个待填槽：呼吸提示 */
.row.active .slot.next:not(.filled) { animation: nudge 1.15s ease-in-out infinite; }
@keyframes nudge {
  0%, 100% { border-color: rgba(255, 185, 100, 0.38); }
  50% { border-color: rgba(255, 200, 130, 0.85); }
}

/* 七色定义 */
[data-c="red"]    { --c: #ff3b3b; --cg: rgba(255, 59, 59, 0.5); }
[data-c="orange"] { --c: #ff8a1e; --cg: rgba(255, 138, 30, 0.5); }
[data-c="yellow"] { --c: #ffd60a; --cg: rgba(255, 214, 10, 0.45); }
[data-c="green"]  { --c: #2ee66b; --cg: rgba(46, 230, 107, 0.5); }
[data-c="blue"]   { --c: #2f7bff; --cg: rgba(47, 123, 255, 0.5); }
[data-c="purple"] { --c: #9b4dff; --cg: rgba(155, 77, 255, 0.5); }
[data-c="pink"]   { --c: #ff4d9d; --cg: rgba(255, 77, 157, 0.5); }

/* 填入颜色：整块从内部点亮，保留厚度与边缘高光 */
.slot.filled, .pkey {
  background:
    radial-gradient(135% 100% at 28% 16%, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0) 44%),
    linear-gradient(155deg,
      color-mix(in srgb, var(--c) 86%, white) 0%,
      var(--c) 48%,
      color-mix(in srgb, var(--c) 66%, black) 100%);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.48),
    inset 0 -4px 8px rgba(0, 0, 0, 0.42),
    inset 1px 0 2px rgba(255, 255, 255, 0.18),
    0 0 13px var(--cg),
    0 3px 5px rgba(0, 0, 0, 0.5);
}

/* 填色瞬间的内部点亮 */
.slot.filled { animation: ignite 0.34s ease; }
@keyframes ignite {
  0% { filter: brightness(0.45); }
  42% { filter: brightness(2.1); }
  100% { filter: brightness(1); }
}

/* 提交扫描：亮度脉冲 + 斜向扫光 */
.slot.scan { animation: scanpass 0.3s ease; }
@keyframes scanpass {
  0% { filter: brightness(1); }
  35% { filter: brightness(1.85) saturate(1.25); }
  100% { filter: brightness(1); }
}
.slot::after {
  content: '';
  position: absolute;
  inset: -10%;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.8) 50%, transparent 68%);
  transform: translateX(-130%);
  opacity: 0;
  pointer-events: none;
}
.slot.scan::after { animation: sheen 0.3s ease; }
@keyframes sheen {
  0% { transform: translateX(-130%); opacity: 1; }
  100% { transform: translateX(130%); opacity: 1; }
}

/* 破解成功：四块同步脉冲 */
.slot.win { animation: winpulse 0.5s ease 3; }
@keyframes winpulse {
  50% { filter: brightness(1.85) drop-shadow(0 0 16px var(--cg)); }
}

/* 反馈灯位（2×2） */
.pegs {
  margin-left: auto;
  flex: none;
  display: grid;
  grid-template-columns: repeat(2, calc(var(--slot) * 0.23));
  gap: 5px 7px;
  padding-left: 4px;
}
.peg {
  width: calc(var(--slot) * 0.23);
  height: calc(var(--slot) * 0.23);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #262b33, #13161b 72%);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.9),
    inset 0 -1px 1px rgba(255, 255, 255, 0.09),
    0 0 0 1px rgba(255, 255, 255, 0.045);
  transition: background 0.15s, box-shadow 0.15s;
}
.peg.g {
  background: radial-gradient(circle at 35% 28%, #c4ffd8 0%, #2ee66b 52%, #0b9243 100%);
  box-shadow:
    0 0 9px rgba(46, 230, 107, 0.85),
    inset 0 1px 1px rgba(255, 255, 255, 0.65);
}
.peg.w {
  background: radial-gradient(circle at 35% 28%, #ffffff 0%, #d3dae1 52%, #8b949e 100%);
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.7),
    inset 0 1px 1px rgba(255, 255, 255, 0.85);
}
.peg.lit { animation: pegpop 0.2s ease; }
@keyframes pegpop {
  0% { transform: scale(0.25); }
  70% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* ---------------- 状态行 ---------------- */

.status {
  position: relative;
  z-index: 1;
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12.5px;
  letter-spacing: 1.5px;
  color: rgba(255, 205, 140, 0.8);
}
.status .chip {
  width: 17px;
  height: 17px;
  border-radius: 24%;
  display: inline-block;
  background:
    radial-gradient(135% 100% at 28% 16%, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0) 44%),
    linear-gradient(155deg,
      color-mix(in srgb, var(--c) 86%, white) 0%,
      var(--c) 48%,
      color-mix(in srgb, var(--c) 66%, black) 100%);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 0 8px var(--cg), inset 0 -2px 3px rgba(0, 0, 0, 0.4);
}
.status .again {
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #241503;
  padding: 6px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffd08a, #ffab3d);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    0 0 14px rgba(255, 170, 60, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.45);
  transition: transform 0.06s, filter 0.06s;
}
.status .again:active { transform: translateY(1.5px) scale(0.97); filter: brightness(1.15); }
.status.win-text { color: #7dffb0; text-shadow: 0 0 12px rgba(46, 230, 107, 0.55); }
.status.lose-text { color: rgba(255, 140, 120, 0.9); }

/* ---------------- 七色选择区 ---------------- */

.palette {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
  padding: 9px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.34);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.6),
    0 1px 0 rgba(255, 255, 255, 0.05);
}

.pkey {
  position: relative;
  aspect-ratio: 1;
  border-radius: 24%;
  cursor: pointer;
  transition: transform 0.06s ease, filter 0.12s ease;
  overflow: hidden;
}
.pkey:active, .pkey.pressed {
  transform: translateY(2px) scale(0.94);
  filter: brightness(1.45);
  transition: transform 0.05s ease, filter 0.05s ease;
}
.pkey.used {
  filter: grayscale(0.75) brightness(0.42);
}
.pkey.shake { animation: shake 0.26s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  55% { transform: translateX(3px); }
  80% { transform: translateX(-2px); }
}

/* ---------------- 底部操作区 ---------------- */

.controls {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.cbtn {
  flex: 1;
  height: 54px;
  border-radius: 17px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(62, 65, 73, 0.92), rgba(27, 29, 34, 0.96));
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.2),
    inset 0 -3px 7px rgba(0, 0, 0, 0.55),
    0 3px 6px rgba(0, 0, 0, 0.42);
  color: #dfe3e9;
  transition: transform 0.06s ease, filter 0.06s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.cbtn:active, .cbtn.pressed {
  transform: translateY(2px) scale(0.97);
  filter: brightness(1.35);
  transition: transform 0.05s ease, filter 0.05s ease;
}
.cbtn svg { width: 24px; height: 24px; }

.cbtn.ok { color: rgba(255, 255, 255, 0.35); }
.cbtn.ok.ready {
  color: #ffc266;
  animation: okpulse 1.1s ease-in-out infinite;
}
@keyframes okpulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.2),
      inset 0 -3px 7px rgba(0, 0, 0, 0.55),
      0 0 14px rgba(255, 170, 60, 0.38),
      0 3px 6px rgba(0, 0, 0, 0.42);
  }
  50% {
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.2),
      inset 0 -3px 7px rgba(0, 0, 0, 0.55),
      0 0 30px rgba(255, 178, 70, 0.8),
      0 3px 6px rgba(0, 0, 0, 0.42);
  }
}
.cbtn.ok.ready svg { filter: drop-shadow(0 0 5px rgba(255, 180, 80, 0.8)); }

.slogan {
  align-self: center;
  flex: none;
  width: 62px;
  text-align: center;
  font-size: 8.5px;
  letter-spacing: 2.2px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.34);
}

/* ---------------- 首次规则说明 ---------------- */

.overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: inherit;
  background: rgba(7, 8, 11, 0.74);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  transition: opacity 0.28s ease;
}
.overlay.hidden { opacity: 0; pointer-events: none; }

.rules-card {
  width: 100%;
  max-width: 300px;
  text-align: center;
  padding: 24px 22px 22px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(30, 33, 40, 0.95), rgba(18, 20, 25, 0.97));
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.12),
    0 18px 44px rgba(0, 0, 0, 0.6);
}
.rules-card h1 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--ink);
  margin-bottom: 4px;
}
.rules-card .sub {
  font-size: 9px;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 16px;
}
.rules-card p {
  font-size: 13px;
  line-height: 2.05;
  color: rgba(232, 234, 238, 0.88);
  letter-spacing: 1px;
}
.rules-card .legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rules-card .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}
.rules-card .dot.g {
  background: radial-gradient(circle at 35% 28%, #c4ffd8, #2ee66b 55%, #0b9243);
  box-shadow: 0 0 7px rgba(46, 230, 107, 0.8);
}
.rules-card .dot.w {
  background: radial-gradient(circle at 35% 28%, #fff, #d3dae1 55%, #8b949e);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.65);
}
.rules-card .start {
  margin-top: 18px;
  width: 100%;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #241503;
  padding: 12px 0;
  border-radius: 13px;
  background: linear-gradient(180deg, #ffd08a, #ffab3d);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    0 0 18px rgba(255, 170, 60, 0.45),
    0 3px 6px rgba(0, 0, 0, 0.45);
  transition: transform 0.06s ease, filter 0.06s ease;
}
.rules-card .start:active { transform: translateY(2px) scale(0.98); filter: brightness(1.12); }

button:focus { outline: none; }