:root {
  --cream: #fff2dc;
  --amber: #ffb400;
  --gray:  #87837e;
  --coral: #ff5a5f;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: var(--cream);
  color: var(--gray);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: none;
}

/* 主舞台 */
#stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
}

/* 背景图 */
#bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url('bg-good.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
}

/* 全屏特效画布 */
#fx {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* 网格线（可选显示） */
#grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 4), minmax(0, 1fr));
  grid-template-rows: repeat(var(--grid-rows, 3), minmax(0, 1fr));
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
#grid.is-visible { opacity: 1; }
.grid-cell {
  box-shadow: inset 0 0 0 .5px rgba(135, 131, 126, .35);
  background: transparent;
}

/* 分区按钮闪光层 */
#zoneflash {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.zone-flash {
  position: absolute;
  background: #fff;
  opacity: 0;
  animation: zoneFade .45s ease-out forwards;
}
@keyframes zoneFade {
  0%   { opacity: .5; }
  100% { opacity: 0; }
}

/* 顶部控制栏：默认隐去，鼠标悬停/点击时淡入，闲置后淡出 */
/* pointer-events 保持 auto——按钮自身的 stopPropagation 已阻止事件冒泡 */
#top-controls {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  z-index: 20;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  opacity: 0;
  transform: translateY(-8px);
  filter: drop-shadow(0 6px 14px rgba(135, 131, 126, .22));
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}
#top-controls.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* 鼠标悬停按钮时快速淡入（250ms） */
#top-controls.is-revealing-fast {
  transition-duration: .2s;
}

/* 切角八边形按钮：默认灰色边框（开启态），hover 变琥珀色，静音态红色+斜线 */
.control-button {
  --btn-edge: rgba(135, 131, 126, .72);
  --btn-fill: rgba(255, 242, 220, .92);
  position: relative;
  min-width: 68px;
  min-height: 44px;
  padding: 8px 12px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--gray);
  background: var(--btn-edge);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px),
                     calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  font: 700 13px/1 "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.control-button::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  background: var(--btn-fill);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px),
                     calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  transition: background .2s ease;
}
.control-button:active { transform: scale(.94); }
.control-button svg {
  width: 20px;
  height: 20px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 静音斜线：默认隐藏，静音时显示 */
.control-button .mute-slash {
  opacity: 0;
  stroke: var(--coral);
  stroke-width: 2.6;
  transition: opacity .2s ease;
}
.control-button.is-muted {
  --btn-edge: rgba(255, 90, 95, .68);
  --btn-fill: rgba(255, 255, 255, .94);
  color: var(--coral);
}
.control-button.is-muted .mute-slash { opacity: 1; }

/* 网格按钮开启态：琥珀色描边 */
.control-button.is-active {
  --btn-edge: rgba(255, 180, 0, .92);
  --btn-fill: rgba(255, 244, 224, .96);
  color: #d88f00;
}

/* 鼠标悬停时边框变琥珀色（仅桌面端） */
@media (hover: hover) {
  .control-button:hover { --btn-edge: rgba(255, 180, 0, 1); }
}

/* 开始遮罩 */
#overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 2.2vmin;
  align-items: center;
  justify-content: center;
  background: rgba(255, 242, 220, .85);
  transition: opacity .5s ease;
  cursor: pointer;
}
#overlay.hide { opacity: 0; pointer-events: none; }
#overlay .title {
  font-size: clamp(40px, 10vmin, 88px);
  font-weight: 900;
  letter-spacing: .18em;
  color: var(--amber);
}
#overlay .title em { font-style: normal; color: var(--gray); }
#overlay .sub {
  font-size: clamp(13px, 2.4vmin, 18px);
  letter-spacing: .5em;
  color: var(--gray);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .35; } }

@media (max-width: 430px) {
  #top-controls {
    top: max(10px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
  }
  .control-button {
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
  }
  .control-button span { display: none; }
}