/* ============================================================
   RAINBOW MINES · OPTICAL FIELD SYSTEM
   高明度 / 多色光污染 / 透明玻璃 + 光纤背光
   设计原则：
   1. 亮、锐、通透：不使用大半径模糊，光源边缘保持清楚。
   2. 面板保持中性：颜色只交给光纤与格子，避免整屏被染色。
   3. 格子是被背光照亮的平板玻璃，不是涂了颜色的糖果。
   ============================================================ */

:root {
  color-scheme: light;

  --ink: #0a2434;
  --ink-soft: #24506a;
  --muted: #4a6d80;
  --label: #2f5872;

  --edge: rgba(255, 255, 255, .95);
  --edge-soft: rgba(255, 255, 255, .68);
  --pane: rgba(255, 255, 255, .58);
  --pane-deep: rgba(255, 255, 255, .72);
  --grid-ink: #10283a;

  --lx-cyan: #00c8ff;
  --lx-blue: #2f7bff;
  --lx-mint: #00e2a6;
  --lx-gold: #ffc21a;
  --lx-rose: #ff2f87;
  --lx-violet: #8250ff;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: #eaf1f5;
  font-family: "Noto Sans SC", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select {
  font: inherit;
}

button,
.file-label {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid #00c8ff;
  outline-offset: 2px;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ============================ 背景：光学场 ============================ */

.optical-world {
  position: fixed;
  z-index: -10;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(178deg, #ffffff 0%, #eef5f8 34%, #f6fafc 62%, #e6eef3 100%);
}

/* 细网格：给画面精密感，线条锐利不发雾 */
.light-grid {
  position: absolute;
  inset: 0;
  opacity: .5;
  background:
    repeating-linear-gradient(90deg, rgba(24, 92, 126, .09) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(24, 92, 126, .07) 0 1px, transparent 1px 96px);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

/* 顶部光谱注入条 */
.spectrum-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #00c8ff 0%, #2f7bff 17%, #8250ff 34%, #ff2f87 51%, #ffc21a 68%, #00e2a6 85%, #00c8ff 100%);
  box-shadow: 0 0 4px rgba(0, 200, 255, .8), 0 1px 10px rgba(130, 80, 255, .35);
}

.fiber-field {
  position: absolute;
  inset: -8%;
}

/* 光纤：细、亮、锐利。只做亮度呼吸，不做位移 */
.fiber {
  --fiber: #00c8ff;
  position: absolute;
  left: 0;
  height: 1.5px;
  color: var(--fiber);
  background: linear-gradient(90deg, transparent 0, currentColor 12%, #fff 46%, #fff 54%, currentColor 88%, transparent 100%);
  box-shadow: 0 0 2px currentColor, 0 0 6px currentColor;
  opacity: .62;
  animation: fiber-breathe 6s ease-in-out infinite alternate;
}

/* 上光带：一组近似平行的光纤，从左侧射入 */
/* 上光带：贴着顶部的两根导入纤，与顶部光谱条呼应 */
.fiber-1  { --fiber: #00c8ff; top: 1.4%; left: -5vw; width: 112vw; height: 1px; transform: rotate(.9deg); }
.fiber-2  { --fiber: #8250ff; top: 3.2%; left: -5vw; width: 112vw; height: 1px; transform: rotate(.9deg); animation-delay: -.9s; }
.fiber-3  { --fiber: #ffc21a; top: 5%;   left: -5vw; width: 112vw; height: 1px; transform: rotate(.9deg); animation-delay: -1.8s; }

/* 底部光纤束：一组平行、等间距、逐根换色的导光纤 */
.fiber-4  { --fiber: #00c8ff; top: 77%;   left: -5vw; width: 112vw; transform: rotate(-1.6deg); animation-delay: -2.7s; }
.fiber-5  { --fiber: #2f7bff; top: 79.4%; left: -5vw; width: 112vw; transform: rotate(-1.6deg); animation-delay: -3.6s; }
.fiber-6  { --fiber: #8250ff; top: 81.8%; left: -5vw; width: 112vw; transform: rotate(-1.6deg); animation-delay: -.5s; }
.fiber-7  { --fiber: #ff2f87; top: 84.2%; left: -5vw; width: 112vw; transform: rotate(-1.6deg); animation-delay: -1.4s; }
.fiber-8  { --fiber: #ffc21a; top: 86.6%; left: -5vw; width: 112vw; transform: rotate(-1.6deg); animation-delay: -2.3s; }
.fiber-9  { --fiber: #00e2a6; top: 89%;   left: -5vw; width: 112vw; transform: rotate(-1.6deg); animation-delay: -3.2s; }
.fiber-10 { --fiber: #00c8ff; top: 91.4%; left: -5vw; width: 112vw; transform: rotate(-1.6deg); animation-delay: -4.1s; }
.fiber-11 { --fiber: #8250ff; top: 93.8%; left: -5vw; width: 112vw; transform: rotate(-1.6deg); animation-delay: -1s; }
.fiber-12 { --fiber: #ff2f87; top: 96.2%; left: -5vw; width: 112vw; transform: rotate(-1.6deg); animation-delay: -1.9s; }
/* 底部透视网格：静态，细线 */
.grid-floor {
  position: absolute;
  left: 50%;
  bottom: -16vh;
  width: 150vw;
  height: 48vh;
  opacity: .34;
  transform: translateX(-50%) perspective(620px) rotateX(64deg);
  transform-origin: bottom;
  background:
    linear-gradient(rgba(0, 138, 184, .5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 138, 184, .42) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: linear-gradient(to top, transparent, #000 45%);
}

#fx-canvas {
  position: fixed;
  z-index: 60;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ============================ 布局与玻璃面板 ============================ */

.shell {
  width: min(1500px, calc(100% - 36px));
  margin: 0 auto;
  padding: 22px 0 48px;
}

/* 面板降饱和，保证文字对比度，颜色留给光纤与棋盘 */
.glass-card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, .96);
  border-radius: 3px;
  background: linear-gradient(158deg, rgba(255, 255, 255, .74), rgba(240, 248, 251, .58));
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 0 0 1px rgba(255, 255, 255, .5),
    0 1px 0 rgba(150, 190, 210, .35),
    0 14px 30px rgba(24, 76, 104, .1);
  backdrop-filter: blur(10px) saturate(.55) brightness(1.08);
}

.topbar {
  min-height: 84px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 12px 22px;
  overflow: hidden;
}

.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #00c8ff, #2f7bff 18%, #8250ff 36%, #ff2f87 54%, #ffc21a 72%, #00e2a6 90%, #00c8ff);
  box-shadow: 0 0 6px rgba(0, 200, 255, .55);
}

.brand,
.account-strip {
  position: relative;
  z-index: 1;
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--ink);
  text-decoration: none;
}

.brand-emblem {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .95);
  background: linear-gradient(150deg, rgba(255, 255, 255, .9), rgba(214, 243, 255, .5));
  box-shadow: inset 0 0 0 1px rgba(0, 200, 255, .28), 0 0 12px rgba(0, 200, 255, .3);
}

.brand-emblem i {
  font-style: normal;
  font-size: 25px;
  color: #0093c4;
  text-shadow: 0 0 8px rgba(0, 200, 255, .85);
  animation: emblem-breathe 3.4s ease-in-out infinite alternate;
}

.brand-copy {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 8px;
  align-items: end;
  font-family: "Chakra Petch", sans-serif;
  line-height: 1;
}

.brand-copy strong,
.brand-copy b {
  font-size: clamp(21px, 2.1vw, 30px);
  font-weight: 700;
  letter-spacing: .05em;
}

.brand-copy strong {
  color: #06364d;
  text-shadow: 0 0 14px rgba(0, 200, 255, .35);
}

.brand-copy b {
  color: #0093c4;
  text-shadow: 0 0 14px rgba(0, 200, 255, .45);
}

.brand-copy small {
  grid-column: 1 / -1;
  margin-top: 7px;
  color: #4c7186;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .26em;
}

.account-strip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 9px 8px 13px;
  border: 1px solid rgba(255, 255, 255, .9);
  background: rgba(255, 255, 255, .6);
  box-shadow: inset 0 1px 0 #fff, 0 3px 12px rgba(30, 84, 112, .08);
  color: var(--label);
  font-size: 11px;
  font-weight: 600;
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #0f8a63;
  font: 700 9px "Chakra Petch", sans-serif;
  letter-spacing: .1em;
}

.live-badge i {
  width: 6px;
  height: 6px;
  background: #00e2a6;
  box-shadow: 0 0 3px #00e2a6, 0 0 9px rgba(0, 226, 166, .9);
  animation: lamp-breathe 1.6s ease-in-out infinite alternate;
}

.account-strip select {
  min-width: 112px;
  max-width: 180px;
  padding: 7px 26px 7px 10px;
}

.icon-button,
.close-button {
  width: 33px;
  height: 33px;
  border: 1px solid rgba(255, 255, 255, .92);
  color: #0f5f7d;
  background: rgba(255, 255, 255, .66);
  box-shadow: inset 0 1px 0 #fff, 0 0 8px rgba(0, 200, 255, .22);
  font-size: 17px;
  transition: color .15s, box-shadow .15s, background .15s;
}

.icon-button:hover,
.close-button:hover {
  color: #00738f;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 200, 255, .55), 0 0 12px rgba(0, 200, 255, .5);
}

.game-layout {
  display: grid;
  grid-template-columns: 278px minmax(0, 1fr) 266px;
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}

.control-panel,
.records-panel {
  padding: 20px;
}

/* ============================ 分区标题 ============================ */

.panel-kicker {
  display: grid;
  grid-template-columns: 30px auto 1fr;
  align-items: center;
  gap: 9px;
  color: #1d4c66;
  font: 700 11px "Chakra Petch", "Noto Sans SC", sans-serif;
  letter-spacing: .09em;
}

.panel-kicker b {
  width: 30px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .95);
  color: var(--section-ink);
  background: rgba(255, 255, 255, .74);
  box-shadow: inset 0 0 0 1px var(--section-line), 0 0 9px var(--section-glow);
  font-size: 10px;
}

.panel-kicker i {
  height: 1px;
  background: linear-gradient(90deg, var(--section-line), transparent);
  box-shadow: 0 0 5px var(--section-glow);
}

.panel-kicker.cyan   { --section-line: #00c8ff; --section-glow: rgba(0, 200, 255, .5);  --section-ink: #0079a0; }
.panel-kicker.yellow { --section-line: #ffc21a; --section-glow: rgba(255, 194, 26, .5); --section-ink: #96690a; }
.panel-kicker.pink   { --section-line: #ff2f87; --section-glow: rgba(255, 47, 135, .45);--section-ink: #b21659; }
.panel-kicker.green  { --section-line: #00e2a6; --section-glow: rgba(0, 226, 166, .45); --section-ink: #0a7a5b; }
.panel-kicker.orange { --section-line: #8250ff; --section-glow: rgba(130, 80, 255, .42);--section-ink: #5a2fc4; }

.section-gap {
  margin-top: 26px;
}

/* ============================ 表单 ============================ */

.config-form {
  display: grid;
  gap: 13px;
  margin-top: 16px;
}

.config-form label,
.marker-style-label {
  display: grid;
  gap: 6px;
  color: var(--label);
  font-size: 11px;
  font-weight: 600;
}

.dimension-fields {
  display: grid;
  grid-template-columns: 1fr 16px 1fr;
  align-items: end;
  gap: 5px;
}

.cross {
  padding-bottom: 9px;
  color: #74a4b8;
  font-size: 16px;
  text-align: center;
}

input,
select {
  min-width: 0;
  border: 1px solid rgba(146, 190, 210, .7);
  border-radius: 2px;
  padding: 9px 10px;
  color: var(--ink);
  background: rgba(255, 255, 255, .82);
  box-shadow: inset 0 1px 3px rgba(30, 84, 112, .07);
  transition: border-color .15s, box-shadow .15s, background .15s;
}

input:focus,
select:focus {
  border-color: #00c8ff;
  background: #fff;
  box-shadow: inset 0 1px 3px rgba(30, 84, 112, .05), 0 0 0 2px rgba(0, 200, 255, .22), 0 0 12px rgba(0, 200, 255, .35);
  outline: none;
}

.field-note {
  margin: -3px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.primary-button {
  position: relative;
  min-height: 54px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 2px;
  padding: 9px 13px;
  color: #06364d;
  background: linear-gradient(150deg, rgba(255, 255, 255, .92), rgba(219, 245, 255, .62));
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(0, 200, 255, .2), 0 5px 14px rgba(24, 76, 104, .1);
  font-weight: 700;
  text-align: left;
  transition: box-shadow .16s, background .16s, color .16s;
}

.primary-button::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #00c8ff, #2f7bff 22%, #8250ff 42%, #ff2f87 62%, #ffc21a 82%, #00e2a6);
  box-shadow: 0 0 6px rgba(0, 200, 255, .6);
}

.primary-button span,
.primary-button b {
  position: relative;
  z-index: 1;
}

.primary-button small {
  display: block;
  margin-bottom: 3px;
  color: #0093c4;
  font: 700 8px "Chakra Petch", sans-serif;
  letter-spacing: .17em;
}

.primary-button b {
  color: #0093c4;
  font-size: 22px;
  font-weight: 400;
}

.primary-button:hover {
  background: linear-gradient(150deg, #fff, rgba(205, 242, 255, .8));
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(0, 200, 255, .5), 0 0 16px rgba(0, 200, 255, .45);
}

/* ============================ 工具 ============================ */

.tool-grid {
  display: grid;
  gap: 8px;
  margin-top: 13px;
}

.tool-button {
  --tool-line: #00c8ff;
  --tool-glow: rgba(0, 200, 255, .42);
  --tool-ink: #0079a0;
  min-height: 54px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, .92);
  border-left: 2px solid var(--tool-line);
  border-radius: 2px;
  padding: 8px 9px;
  color: var(--ink);
  background: rgba(255, 255, 255, .6);
  box-shadow: inset 0 1px 0 #fff, -3px 0 10px var(--tool-glow), 0 3px 10px rgba(24, 76, 104, .07);
  text-align: left;
  transition: background .16s, box-shadow .16s;
}

.hint-tool { --tool-line: #00c8ff; --tool-glow: rgba(0, 200, 255, .42); --tool-ink: #0079a0; }
.undo-tool { --tool-line: #ff2f87; --tool-glow: rgba(255, 47, 135, .34); --tool-ink: #b21659; }

.tool-button:hover:not(:disabled) {
  background: #fff;
  box-shadow: inset 0 1px 0 #fff, -4px 0 14px var(--tool-glow), 0 0 0 1px var(--tool-line);
}

.tool-button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.tool-icon {
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .95);
  color: var(--tool-ink);
  background: rgba(255, 255, 255, .8);
  box-shadow: inset 0 0 0 1px var(--tool-glow), 0 0 8px var(--tool-glow);
  font-size: 17px;
}

.tool-button span:nth-child(2) {
  display: grid;
  gap: 2px;
}

.tool-button b {
  font-size: 12px;
  font-weight: 700;
}

.tool-button small {
  color: var(--muted);
  font-size: 9px;
}

.tool-button em {
  color: var(--tool-ink);
  font: 700 8px "Chakra Petch", sans-serif;
  font-style: normal;
  letter-spacing: .1em;
}

.tool-message {
  min-height: 40px;
  margin: 10px 0 0;
  padding: 8px 10px;
  border-left: 2px solid #00c8ff;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, .55);
  box-shadow: -3px 0 9px rgba(0, 200, 255, .2);
  font-size: 10px;
  line-height: 1.6;
}

/* ============================ 标记样式 ============================ */

.marker-style-label {
  margin-top: 12px;
}

.marker-style-label select {
  width: 100%;
}

.marker-preview {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}

.marker-chip {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .95);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .52) 0 41%, rgba(255, 255, 255, .16) 41% 43%, rgba(255, 255, 255, 0) 43%),
    linear-gradient(0deg, #ffe3ef 0 2px, #ff2f87 2px 4px, transparent 4px),
    linear-gradient(180deg, #e01f74 0%, #ff2f87 52%, #ff67a8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset -1px -1px 0 rgba(120, 10, 55, .5), 0 0 9px rgba(255, 47, 135, .4);
}

.marker-chip svg {
  width: 66%;
  height: 66%;
  color: #fff;
  filter: drop-shadow(0 1px 0 rgba(120, 10, 55, .5));
}

/* ============================ 档案数据 ============================ */

.archive-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 12px;
}

.data-button {
  min-height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 2px;
  padding: 7px;
  color: var(--label);
  background: rgba(255, 255, 255, .6);
  box-shadow: inset 0 1px 0 #fff, 0 3px 9px rgba(24, 76, 104, .07);
  font-size: 10px;
  font-weight: 600;
}

.data-button:hover {
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 226, 166, .55), 0 0 12px rgba(0, 226, 166, .38);
}

.data-button span {
  color: #0a7a5b;
  font-size: 14px;
}

.file-label input {
  display: none;
}

/* ============================ HUD ============================ */

.play-area {
  min-width: 0;
}

.hud {
  min-height: 96px;
  display: grid;
  grid-template-columns: 1fr 1.45fr 1fr;
  align-items: center;
  overflow: hidden;
  padding: 12px 23px;
}

.hud::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #00c8ff 20%, #8250ff 50%, #ff2f87 80%, transparent);
  opacity: .75;
}

.stat,
.game-status {
  position: relative;
  z-index: 1;
}

.stat {
  display: grid;
  gap: 3px;
}

.stat span {
  color: var(--muted);
  font: 700 9px "Chakra Petch", sans-serif;
  letter-spacing: .16em;
}

.stat strong {
  font: 700 33px "Chakra Petch", sans-serif;
  letter-spacing: .08em;
  line-height: 1;
}

.mine-stat strong {
  color: #b21659;
  text-shadow: 0 0 12px rgba(255, 47, 135, .45);
}

.mine-stat i {
  width: 70px;
  height: 2px;
  background: #ff2f87;
  box-shadow: 0 0 4px #ff2f87, 0 0 12px rgba(255, 47, 135, .7);
}

.time-stat {
  justify-items: end;
  text-align: right;
}

.time-stat strong {
  color: #0079a0;
  text-shadow: 0 0 12px rgba(0, 200, 255, .45);
}

.time-stat i {
  width: 70px;
  height: 2px;
  background: #00c8ff;
  box-shadow: 0 0 4px #00c8ff, 0 0 12px rgba(0, 200, 255, .7);
}

.game-status {
  display: grid;
  justify-items: center;
  gap: 5px;
  text-align: center;
}

.game-status strong {
  color: #06364d;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .05em;
}

.game-status small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}

/* 静态三段指示灯，不再有左右移动的光点 */
.status-lamp {
  display: flex;
  gap: 4px;
}

.status-lamp i {
  width: 16px;
  height: 3px;
  background: #00c8ff;
  box-shadow: 0 0 3px #00c8ff, 0 0 9px rgba(0, 200, 255, .7);
}

.status-lamp i:nth-child(2) { background: #8250ff; box-shadow: 0 0 3px #8250ff, 0 0 9px rgba(130, 80, 255, .6); }
.status-lamp i:nth-child(3) { background: #00e2a6; box-shadow: 0 0 3px #00e2a6, 0 0 9px rgba(0, 226, 166, .6); }

.game-status.danger strong { color: #b21659; }
.game-status.danger .status-lamp i,
.game-status.danger .status-lamp i:nth-child(2),
.game-status.danger .status-lamp i:nth-child(3) {
  background: #ff2f87;
  box-shadow: 0 0 3px #ff2f87, 0 0 10px rgba(255, 47, 135, .75);
}

.game-status.success strong { color: #0a7a5b; }
.game-status.success .status-lamp i,
.game-status.success .status-lamp i:nth-child(2),
.game-status.success .status-lamp i:nth-child(3) {
  background: #00e2a6;
  box-shadow: 0 0 3px #00e2a6, 0 0 10px rgba(0, 226, 166, .75);
}

/* ============================ 棋盘 ============================ */

.board-frame {
  min-height: 560px;
  margin-top: 18px;
  padding: 46px 16px 18px;
  overflow: hidden;
}

.board-frame.mine-impact {
  animation: board-impact .16s ease-out;
}

.board-banner {
  position: absolute;
  z-index: 3;
  top: 15px;
  left: 50%;
  min-width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  transform: translateX(-50%);
  color: #24506a;
  font: 700 10px "Chakra Petch", sans-serif;
  letter-spacing: .18em;
}

.board-banner::before,
.board-banner::after {
  content: "";
  width: 56px;
  height: 1px;
}

.board-banner::before {
  background: linear-gradient(90deg, transparent, #00c8ff);
  box-shadow: 0 0 5px rgba(0, 200, 255, .8);
}

.board-banner::after {
  background: linear-gradient(90deg, #ff2f87, transparent);
  box-shadow: 0 0 5px rgba(255, 47, 135, .7);
}

.board-banner b {
  color: #0079a0;
  font-weight: 700;
}

.board-scroll {
  min-height: 488px;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, .9);
  background: linear-gradient(170deg, rgba(255, 255, 255, .5), rgba(228, 243, 249, .3));
  box-shadow: inset 0 1px 0 #fff, inset 0 0 34px rgba(255, 255, 255, .5);
}

/* 缝隙压深，格阵边缘咬得住，远看像光学矩阵 */
.board {
  --cell: 28px;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell));
  gap: 1px;
  width: max-content;
  padding: 1px;
  background: #10283a;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .9),
    0 0 0 2px rgba(16, 40, 58, .3),
    0 0 14px rgba(0, 200, 255, .26),
    0 4px 10px rgba(12, 46, 66, .14);
}

.cell {
  /* 色相与明度由 JS 逐格写入；派生色用 color-mix 推导，
     前一行是不支持 color-mix 时的回退值 */
  --tile-lum: 58%;
  --tile-core: hsl(var(--tile-hue), 100%, var(--tile-lum));
  --tile-mid: hsl(var(--tile-hue), 100%, 66%);
  --tile-mid: color-mix(in srgb, var(--tile-core) 84%, #fff);
  --tile-top: hsl(var(--tile-hue), 100%, 74%);
  --tile-top: color-mix(in srgb, var(--tile-core) 64%, #fff);
  --tile-hot: hsl(var(--tile-hue), 100%, 82%);
  --tile-hot: color-mix(in srgb, var(--tile-core) 42%, #fff);
  --tile-base: hsl(var(--tile-hue), 100%, 96%);
  --tile-base: color-mix(in srgb, var(--tile-core) 12%, #fff);
  --tile-deep: hsl(var(--tile-hue), 90%, 48%);
  --tile-deep: color-mix(in srgb, var(--tile-core) 88%, #10314a);
  --tile-shade: hsla(var(--tile-hue), 85%, 32%, .6);
  --tile-shade: color-mix(in srgb, var(--tile-core) 55%, #0a2130);
  position: relative;
  width: var(--cell);
  height: var(--cell);
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: var(--tile-base);
  font: 700 calc(var(--cell) * .52) "Chakra Petch", sans-serif;
  line-height: 1;
  transition: filter .12s;
}

/* 藏在玻璃后面的光源：底边一条热线注入，向上平整衰减 */
.cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, var(--tile-hot) 0 2px, var(--tile-core) 2px 4px, transparent 4px),
    linear-gradient(180deg, var(--tile-deep) 0%, var(--tile-core) 52%, var(--tile-mid) 100%);
}

/* 玻璃表面：一道贯穿整格的硬边斜切面 + 1px 亮边 / 1px 暗边 */
.cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(255, 255, 255, .52) 0 41%, rgba(255, 255, 255, .16) 41% 43%, rgba(255, 255, 255, 0) 43%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 1px 0 0 rgba(255, 255, 255, .55),
    inset -1px -1px 0 var(--tile-shade);
}

.cell-face {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.cell-face svg {
  width: 66%;
  height: 66%;
}

.cell:hover:not(.revealed):not(.flagged) {
  z-index: 4;
  filter: brightness(1.22) saturate(1.05);
}

.cell:hover:not(.revealed):not(.flagged)::after {
  box-shadow: inset 0 0 0 1px #fff, inset 1px 1px 0 #fff, inset -1px -1px 0 var(--tile-shade);
}

.board.dense .cell::before {
  background:
    linear-gradient(0deg, var(--tile-hot) 0 1px, transparent 1px),
    linear-gradient(180deg, var(--tile-deep) 0%, var(--tile-core) 58%, var(--tile-mid) 100%);
}

.board.dense .cell::after {
  background: linear-gradient(150deg, rgba(255, 255, 255, .42) 0 41%, rgba(255, 255, 255, 0) 42%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset -1px -1px 0 var(--tile-shade);
}

/* 翻开区域：无色相的清透玻璃，和未翻开区域区别明确 */
.cell.revealed {
  background: #f7fbfe;
  box-shadow: inset 0 0 0 1px rgba(178, 212, 228, .5);
  animation: cell-open .18s ease-out;
}

.cell.revealed::before,
.cell.revealed::after {
  display: none;
}

.cell.revealed:hover {
  background: #fff;
}

.n1 { color: #0b6fd8; }
.n2 { color: #0f8a63; }
.n3 { color: #d4326f; }
.n4 { color: #6a3fd6; }
.n5 { color: #c67b0a; }
.n6 { color: #0a8fa6; }
.n7 { color: #a5308f; }
.n8 { color: #3f5c72; }

/* 地雷：统一图标，静态显示，不持续抖动 */
.cell.revealed.mine {
  background: linear-gradient(152deg, #fff 0 34%, #ffdbe8 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 47, 135, .5), inset 0 -2px 0 #ff2f87;
}

.cell.revealed.mine .cell-face svg {
  color: #e00f63;
  filter: drop-shadow(0 0 3px rgba(255, 47, 135, .6));
}

/* 爆点：一次性闪爆，结束后停在明确的高亮状态 */
.cell.mine.exploded {
  z-index: 5;
  background: linear-gradient(152deg, #fff 0 30%, #ffe08c 100%);
  box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px #ffc21a, 0 0 14px rgba(255, 194, 26, .85), 0 0 26px rgba(255, 47, 135, .5);
  animation: cell-detonate .45s ease-out both;
}

.cell.mine.exploded .cell-face svg {
  color: #d80f2f;
  filter: drop-shadow(0 0 4px rgba(255, 194, 26, .9));
}

/* 标记：保留背光色相，图标为白色实心，一次性点亮 */
.cell.flagged {
  animation: cell-mark .18s ease-out;
}

.cell.flagged::after {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), inset -1px -1px 0 var(--tile-shade);
}

.cell.flagged .cell-face svg {
  color: #fff;
  filter: drop-shadow(0 1px 0 var(--tile-shade)) drop-shadow(0 0 2px rgba(255, 255, 255, .75));
}

/* 提示：只做亮度脉冲，不缩放，避免鼓包感 */
.cell.hinted {
  z-index: 6;
  --tile-hue: 162;
  --tile-lum: 48%;
  animation: cell-hint .55s ease-in-out infinite alternate;
}

.cell.hinted::before {
  background:
    linear-gradient(0deg, #d6fff3 0 1px, #00e2a6 1px 2px, transparent 2px),
    radial-gradient(150% 120% at 50% 106%, #00e2a6 0%, #3cf0c0 44%, #8bffe0 100%);
}

.cell.hinted::after {
  box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px #00e2a6;
}

/* 触雷提示：排在棋盘下方的横条，完全不遮挡格阵 */
.board-overlay[hidden] {
  display: none;
}

.board-overlay {
  position: relative;
  z-index: 12;
  width: max-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px auto 0;
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, .95);
  background: rgba(255, 255, 255, .92);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(255, 47, 135, .35), 0 6px 16px rgba(24, 76, 104, .12), 0 0 14px rgba(255, 47, 135, .26);
  animation: bar-rise .22s ease-out;
}

.overlay-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 47, 135, .4);
  background: rgba(255, 235, 243, .85);
}

.overlay-icon svg {
  width: 70%;
  height: 70%;
  color: #e00f63;
  filter: drop-shadow(0 0 3px rgba(255, 47, 135, .55));
}

.overlay-copy {
  display: grid;
  gap: 2px;
  text-align: left;
}

.overlay-copy strong {
  color: #b21659;
  font-size: 13px;
  font-weight: 700;
}

.overlay-copy small {
  color: var(--muted);
  font-size: 9px;
}

.board-overlay button {
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 2px;
  padding: 8px 14px;
  color: #b21659;
  background: linear-gradient(150deg, #fff, rgba(255, 226, 238, .8));
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 47, 135, .35), 0 0 12px rgba(255, 47, 135, .3);
  font-size: 11px;
  font-weight: 700;
}

.board-overlay button:hover {
  box-shadow: inset 0 0 0 1px #ff2f87, 0 0 16px rgba(255, 47, 135, .5);
}

.board-tip {
  margin: 12px 0 0;
  color: var(--muted);
  text-align: center;
  font-size: 10px;
  font-weight: 500;
}

.board-tip span {
  display: inline-block;
  border: 1px solid rgba(146, 190, 210, .7);
  border-radius: 2px;
  padding: 2px 7px;
  color: var(--label);
  background: rgba(255, 255, 255, .8);
  font-weight: 600;
}

.board-tip i {
  margin: 0 6px;
  color: #8fb6c6;
  font-style: normal;
}

/* ============================ 战绩 ============================ */

.record-summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  margin: 18px 0 14px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, .92);
  color: var(--label);
  background: rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 #fff, 0 3px 9px rgba(24, 76, 104, .06);
  font-size: 10px;
  font-weight: 600;
}

.record-summary span {
  display: grid;
  gap: 2px;
}

.record-summary small {
  color: #5a2fc4;
  font: 700 8px "Chakra Petch", sans-serif;
  letter-spacing: .14em;
}

.record-summary strong {
  color: #5a2fc4;
  font: 700 32px "Chakra Petch", sans-serif;
  line-height: 1;
  text-shadow: 0 0 12px rgba(130, 80, 255, .4);
}

.record-list {
  display: grid;
  gap: 8px;
  max-height: 520px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
  counter-reset: wins;
}

.record-list li {
  position: relative;
  min-height: 58px;
  padding: 10px 9px 9px 40px;
  border: 1px solid rgba(255, 255, 255, .92);
  border-left: 2px solid #8250ff;
  color: var(--ink);
  background: rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 #fff, -3px 0 9px rgba(130, 80, 255, .18);
  counter-increment: wins;
}

.record-list li::before {
  content: counter(wins);
  position: absolute;
  left: 9px;
  top: 10px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(130, 80, 255, .35);
  color: #5a2fc4;
  background: rgba(255, 255, 255, .85);
  font: 700 10px "Chakra Petch", sans-serif;
}

.record-list strong,
.record-list span {
  display: block;
}

.record-list strong {
  font: 700 11px "Chakra Petch", "Noto Sans SC", sans-serif;
}

.record-list span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
}

.empty-records[hidden] {
  display: none;
}

.empty-records {
  min-height: 140px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  margin: 0;
  padding: 12px;
  border: 1px dashed rgba(146, 190, 210, .8);
  color: var(--muted);
  background: rgba(255, 255, 255, .38);
  text-align: center;
  font-size: 10px;
  line-height: 1.7;
}

.empty-records b {
  color: #5a2fc4;
  font-size: 24px;
  font-weight: 400;
  text-shadow: 0 0 10px rgba(130, 80, 255, .45);
}

/* ============================ 档案弹窗 ============================ */

.account-dialog {
  width: min(555px, calc(100% - 28px));
  border: 1px solid rgba(255, 255, 255, .96);
  border-radius: 3px;
  padding: 0;
  color: var(--ink);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 1px rgba(0, 200, 255, .28), 0 24px 60px rgba(20, 66, 92, .28);
  backdrop-filter: blur(14px) saturate(.7);
}

.account-dialog::backdrop {
  background: rgba(180, 210, 224, .45);
  backdrop-filter: blur(6px) saturate(.6);
}

.dialog-card {
  padding: 21px;
}

.dialog-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
}

.dialog-top span {
  display: grid;
  gap: 3px;
}

.dialog-top small {
  color: #0079a0;
  font: 700 8px "Chakra Petch", sans-serif;
  letter-spacing: .2em;
}

.create-account {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin: 19px 0 12px;
}

.create-account button {
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 2px;
  padding: 8px 13px;
  color: #0079a0;
  background: linear-gradient(150deg, #fff, rgba(219, 245, 255, .7));
  box-shadow: inset 0 0 0 1px rgba(0, 200, 255, .3), 0 0 10px rgba(0, 200, 255, .25);
  font-weight: 700;
}

.account-list {
  display: grid;
  gap: 7px;
  max-height: 290px;
  overflow: auto;
}

.account-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(146, 190, 210, .55);
  padding: 9px 10px;
  background: rgba(255, 255, 255, .7);
}

.account-item strong,
.account-item small {
  display: block;
}

.account-item small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.account-actions {
  display: flex;
  gap: 6px;
}

.account-actions button {
  border: 1px solid rgba(146, 190, 210, .6);
  border-radius: 2px;
  padding: 5px 9px;
  color: #0079a0;
  background: rgba(255, 255, 255, .85);
  font-size: 10px;
  font-weight: 600;
}

.account-actions button:last-child {
  color: #b21659;
}

.dialog-note {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
}

/* ============================ 动画 ============================ */

@keyframes fiber-breathe {
  to { opacity: .3; }
}

@keyframes emblem-breathe {
  to { opacity: .6; }
}

@keyframes lamp-breathe {
  to { opacity: .45; }
}

/* 翻开不用 opacity 动画，否则会透出深色缝隙变灰 */
@keyframes cell-open {
  from { background: #fff; box-shadow: inset 0 0 0 1px #fff; }
}

@keyframes cell-mark {
  from { filter: brightness(2.1); }
}

@keyframes cell-hint {
  to { filter: brightness(1.28); }
}

@keyframes cell-detonate {
  0% { filter: brightness(2.6) saturate(.4); }
  40% { filter: brightness(1.5); }
  100% { filter: none; }
}

/* 只有爆雷保留短促轻微的冲击震动 */
@keyframes board-impact {
  0%, 100% { transform: translate3d(0, 0, 0); }
  28% { transform: translate3d(-2px, 1px, 0); }
  56% { transform: translate3d(1.5px, -1px, 0); }
  78% { transform: translate3d(-.6px, .4px, 0); }
}

@keyframes bar-rise {
  from { opacity: 0; transform: translateY(8px); }
}

/* ============================ 响应式 ============================ */

@media (max-width: 1120px) {
  .game-layout {
    grid-template-columns: 254px minmax(0, 1fr);
  }

  .records-panel {
    grid-column: 1 / -1;
  }

  .record-list {
    grid-template-columns: repeat(3, 1fr);
    max-height: none;
  }

  .empty-records {
    min-height: 100px;
  }
}

@media (max-width: 760px) {
  .shell {
    width: min(100% - 18px, 620px);
    padding-top: 9px;
  }

  .topbar {
    min-height: auto;
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
  }

  .brand {
    justify-content: center;
  }

  .account-strip {
    justify-content: center;
    flex-wrap: wrap;
  }

  .game-layout {
    grid-template-columns: 1fr;
    gap: 13px;
    margin-top: 13px;
  }

  .control-panel,
  .records-panel {
    padding: 17px;
  }

  .hud {
    min-height: 86px;
    padding: 10px 12px;
  }

  .stat strong {
    font-size: 24px;
  }

  .stat span {
    font-size: 8px;
  }

  .game-status strong {
    font-size: 15px;
  }

  .game-status small {
    max-width: 130px;
    font-size: 9px;
  }

  .board-frame {
    min-height: 430px;
    margin-top: 13px;
    padding: 44px 9px 15px;
  }

  .board-scroll {
    min-height: 372px;
    place-items: start center;
    padding: 18px;
  }

  .board-banner {
    min-width: 220px;
    gap: 9px;
    font-size: 9px;
  }

  .board-banner::before,
  .board-banner::after {
    width: 26px;
  }

  .board-overlay {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }

  .record-list {
    grid-template-columns: 1fr;
  }

  .grid-floor {
    width: 230vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}