/* ============================================================
   拾光游戏厅 · breakout.css
   打砖块 Breakout：胡桃木桌面机台 + 磷光 CRT + 黄铜挡板。
   仅作用于 .brk-* 命名空间（含 brk-wrap 内的 .cover 之外元素）。
   ============================================================ */

.brk-wrap {
  --brk-brass: #c6a05a;
  --brk-brass-hi: #e6c982;
  --brk-brass-dim: #8f713c;
  --brk-screen-deep: #050d0b;
  --brk-phosphor: #efe1c4;
  --brk-teal: #8ec7b7;
  position: relative;
  width: 100%;
}

.brk-wrap [hidden] { display: none !important; }

/* ---------------- 机台所在的游戏厅地面 ---------------- */
.brk-stage {
  position: relative;
  align-items: start;
  padding: clamp(14px, 2.2vw, 26px) clamp(10px, 1.8vw, 24px);
  background:
    radial-gradient(ellipse 58% 44% at 50% 6%, rgba(217, 154, 76, .12), transparent 62%),
    radial-gradient(ellipse 86% 62% at 50% 114%, rgba(178, 58, 43, .14), transparent 72%),
    radial-gradient(ellipse 34% 40% at 8% 80%, rgba(47, 111, 98, .1), transparent 70%),
    repeating-linear-gradient(44deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(93deg, rgba(26, 14, 7, .2) 0 2px, rgba(255, 230, 183, .014) 2px 5px, transparent 5px 19px),
    linear-gradient(150deg, #3b2a1c, #20140d 80%);
}

.brk-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 64% 56% at 50% 42%, transparent 55%, rgba(0, 0, 0, .32));
}

/* ---------------- 机台主体 ---------------- */
.brk-cabinet {
  position: relative;
  z-index: 1;
  width: min(100%, 720px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  filter: drop-shadow(0 26px 32px rgba(0, 0, 0, .45));
}

/* ---------------- 顶部灯牌 ---------------- */
.brk-marquee {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 9px 16px 8px;
  border: 1px solid rgba(198, 160, 90, .38);
  border-bottom: 0;
  border-radius: 8px 8px 2px 2px;
  background:
    linear-gradient(180deg, rgba(255, 242, 205, .1), transparent 62%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 2px, transparent 2px 6px),
    linear-gradient(160deg, #4a3320, #241710);
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 198, .22),
    inset 0 -1px 0 rgba(0, 0, 0, .4);
}

.brk-marquee::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 3px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230, 201, 130, .38), transparent);
}

.brk-bulbs {
  flex: 0 0 auto;
  width: 58px;
  height: 9px;
  background-image: radial-gradient(circle at center, #f2d79c 0 1.7px, rgba(230, 201, 130, .18) 2.3px, transparent 3px);
  background-size: 13px 9px;
  background-repeat: repeat-x;
  opacity: .85;
  filter: drop-shadow(0 0 5px rgba(230, 201, 130, .55));
}

.brk-marquee-plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1.15;
  text-align: center;
}

.brk-marquee-kicker {
  color: rgba(198, 160, 90, .48);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .32em;
}

.brk-marquee-en {
  color: var(--brk-brass-hi);
  font-family: var(--font-display);
  font-size: clamp(17px, 3vw, 25px);
  font-weight: 700;
  letter-spacing: .3em;
  text-indent: .3em;
  line-height: 1.2;
  text-shadow:
    0 0 10px rgba(230, 201, 130, .5),
    0 0 26px rgba(217, 154, 76, .3),
    0 2px 0 rgba(0, 0, 0, .6);
}

.brk-marquee-cn {
  color: rgba(239, 225, 196, .68);
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: .62em;
  text-indent: .62em;
}

/* ---------------- 显示器外壳 ---------------- */
.brk-monitor {
  position: relative;
  padding: clamp(10px, 1.6vw, 16px);
  border: 1px solid rgba(198, 160, 90, .3);
  border-top-color: rgba(230, 201, 130, .24);
  background:
    linear-gradient(180deg, rgba(255, 238, 205, .09), transparent 16%),
    repeating-linear-gradient(92deg, rgba(255, 230, 185, .026) 0 1px, transparent 1px 5px),
    linear-gradient(160deg, #38281a, #1d120b 76%);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 196, .14),
    inset 0 -6px 14px rgba(0, 0, 0, .45);
}

.brk-monitor::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255, 235, 200, .06);
  pointer-events: none;
}

.brk-screw {
  position: absolute;
  z-index: 3;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #f2dba0, #b98d4e 48%, #6a4c22 78%, #3a2711);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(38, 22, 8, .5);
}

.brk-screw::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 50%;
  height: 1px;
  margin-top: -.5px;
  background: rgba(38, 22, 8, .62);
  transform: rotate(28deg);
}

.brk-screw.is-tl { left: 5px; top: 5px; }
.brk-screw.is-tr { right: 5px; top: 5px; }
.brk-screw.is-bl { left: 5px; bottom: 5px; }
.brk-screw.is-br { right: 5px; bottom: 5px; }

/* ---------------- 屏幕 ---------------- */
.brk-screen {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--brk-screen-deep);
  border: 2px solid #0b0806;
  box-shadow:
    inset 0 0 0 1px rgba(198, 160, 90, .22),
    inset 0 0 34px rgba(0, 0, 0, .8),
    0 0 18px rgba(158, 228, 200, .05);
}

.brk-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: 8px;
  background:
    radial-gradient(ellipse 78% 74% at 50% 46%, transparent 56%, rgba(0, 0, 0, .42) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 7%);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, .55);
}

.brk-canvas-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--brk-screen-deep);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: ew-resize;
}

.brk-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* 扫描线 / 反光 / 刷新扫掠 */
.brk-scan {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
  opacity: .55;
}

.brk-glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(116deg, rgba(255, 255, 255, .062) 0%, transparent 24%, transparent 70%, rgba(255, 255, 255, .028) 100%),
    radial-gradient(ellipse 38% 22% at 22% 8%, rgba(255, 255, 255, .055), transparent 70%);
}

.brk-sweep {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 26%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(190, 230, 205, .038) 48%, transparent);
  transform: translateY(-120%);
}

/* ---------------- 屏幕内浮层 ---------------- */
.brk-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 2.2vw, 18px);
  text-align: center;
  background:
    radial-gradient(ellipse 62% 58% at 50% 46%, rgba(5, 13, 11, .72), rgba(3, 7, 6, .93) 78%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .2) 0 1px, transparent 1px 3px);
}

.brk-ov-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  max-width: 92%;
}

.brk-ov-en {
  color: rgba(230, 201, 130, .74);
  font-family: var(--font-mono);
  font-size: clamp(7px, 1.3vw, 10px);
  letter-spacing: .34em;
  text-indent: .34em;
  text-shadow: 0 0 12px rgba(230, 201, 130, .5);
}

.brk-ov-title {
  margin: 1px 0 2px;
  color: var(--brk-phosphor);
  font-family: var(--font-display);
  font-size: clamp(21px, 4.4vw, 33px);
  font-weight: 700;
  letter-spacing: .22em;
  text-indent: .22em;
  line-height: 1.25;
  text-shadow:
    0 0 16px rgba(230, 201, 130, .36),
    0 0 40px rgba(158, 228, 200, .12),
    0 2px 0 rgba(0, 0, 0, .8);
}

.brk-ov-hint {
  color: rgba(239, 225, 196, .76);
  font-size: clamp(9.5px, 1.5vw, 11.5px);
  line-height: 1.8;
  letter-spacing: .02em;
}

.brk-ov-hint span {
  color: rgba(198, 160, 90, .56);
  font-size: .9em;
}

.brk-ov-foot {
  margin-top: 3px;
  color: rgba(198, 160, 90, .46);
  font-size: clamp(7px, 1.2vw, 9px);
  letter-spacing: .04em;
}

.brk-ov-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 7px;
}

/* 结算数据 */
.brk-final {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(12px, 2.6vw, 26px);
  margin: 5px 0 3px;
}

.brk-final > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 52px;
}

.brk-final em {
  color: rgba(198, 160, 90, .58);
  font-family: var(--font-mono);
  font-size: clamp(6.5px, 1.1vw, 8.5px);
  font-style: normal;
  letter-spacing: .08em;
  white-space: nowrap;
}

.brk-final b {
  color: var(--brk-phosphor);
  font-family: var(--font-display);
  font-size: clamp(16px, 2.7vw, 23px);
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 0 12px rgba(230, 201, 130, .36);
}

.brk-new-record {
  margin-top: 2px;
  color: var(--brk-brass-hi);
  font-family: var(--font-mono);
  font-size: clamp(7.5px, 1.3vw, 10px);
  font-weight: 700;
  letter-spacing: .26em;
  text-indent: .26em;
  text-shadow: 0 0 12px rgba(230, 201, 130, .6);
}

/* 机台按钮（浮层内） */
.brk-arcade-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 20px;
  border: 1px solid rgba(230, 201, 130, .42);
  border-radius: 3px;
  color: #f2e3c2;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 52%),
    linear-gradient(180deg, #5a3d24, #37241a);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, .22),
    0 3px 0 rgba(0, 0, 0, .4),
    0 6px 12px rgba(0, 0, 0, .38);
  font-family: var(--font-display);
  font-size: clamp(10px, 1.5vw, 12px);
  font-weight: 700;
  letter-spacing: .18em;
  text-indent: .18em;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .16s ease, filter .16s ease;
}

.brk-arcade-btn:hover { filter: brightness(1.1); }

.brk-arcade-btn:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, .16),
    0 1px 0 rgba(0, 0, 0, .4),
    0 3px 6px rgba(0, 0, 0, .36);
}

.brk-arcade-btn.is-primary {
  border-color: rgba(255, 205, 160, .46);
  color: #fff4e1;
  background:
    linear-gradient(180deg, rgba(255, 222, 190, .26), transparent 54%),
    linear-gradient(180deg, #c14c36, #8d2e22 70%, #6d2018);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 190, .38),
    0 3px 0 #4a150f,
    0 7px 14px rgba(0, 0, 0, .42),
    0 0 20px rgba(178, 58, 43, .3);
  text-shadow: 0 1px 1px rgba(56, 10, 5, .4);
}

.brk-arcade-btn.is-primary:hover { filter: brightness(1.08); }

/* ---------------- 过关横幅 ---------------- */
.brk-banner {
  position: absolute;
  left: 50%;
  top: 30%;
  z-index: 5;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 26px 8px;
  border: 1px solid rgba(230, 201, 130, .62);
  background:
    linear-gradient(180deg, rgba(255, 242, 205, .07), transparent 60%),
    rgba(6, 13, 11, .86);
  box-shadow:
    0 0 26px rgba(230, 201, 130, .28),
    inset 0 0 22px rgba(230, 201, 130, .07);
  pointer-events: none;
  white-space: nowrap;
}

.brk-banner b {
  color: var(--brk-brass-hi);
  font-family: var(--font-display);
  font-size: clamp(14px, 2.6vw, 21px);
  letter-spacing: .24em;
  text-indent: .24em;
  text-shadow: 0 0 14px rgba(230, 201, 130, .6);
}

.brk-banner span {
  color: rgba(239, 225, 196, .74);
  font-family: var(--font-mono);
  font-size: clamp(7px, 1.2vw, 9px);
  letter-spacing: .06em;
}

/* ---------------- 操作台 ---------------- */
.brk-deck {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 0;
  padding: 10px 16px;
  border: 1px solid rgba(198, 160, 90, .3);
  border-top-color: rgba(0, 0, 0, .5);
  border-radius: 0 0 9px 9px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .26), transparent 22%),
    linear-gradient(180deg, rgba(255, 235, 195, .05), transparent 48%),
    repeating-linear-gradient(91deg, rgba(30, 17, 8, .22) 0 2px, transparent 2px 7px, rgba(255, 228, 180, .02) 7px 9px),
    linear-gradient(165deg, #533822 0%, #4a301c 12%, #33200f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 198, .12),
    inset 0 -8px 16px rgba(0, 0, 0, .38),
    0 14px 24px rgba(0, 0, 0, .34);
}

/* 旋钮 */
.brk-knob {
  flex: 0 0 auto;
  width: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.brk-knob-dial {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background:
    conic-gradient(from 210deg, rgba(255, 255, 255, .22), transparent 26%, transparent 62%, rgba(255, 255, 255, .12), rgba(255, 255, 255, .22)),
    radial-gradient(circle at 36% 30%, #f0d9a4, #c19a5b 46%, #6d4d24 82%, #3c2812);
  border: 1px solid rgba(38, 22, 8, .7);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, .5),
    inset 0 1px 1px rgba(255, 246, 214, .5),
    inset 0 -3px 6px rgba(0, 0, 0, .4);
}

.brk-knob-dial::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #7c5a2b, #3c2812 78%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 240, 200, .18);
}

.brk-knob-dial i {
  position: absolute;
  left: 50%;
  top: 5px;
  width: 2px;
  height: 11px;
  margin-left: -1px;
  border-radius: 1px;
  background: linear-gradient(180deg, #f6e3b4, #8f713c);
  box-shadow: 0 0 4px rgba(230, 201, 130, .35);
}

.brk-knob em {
  color: rgba(198, 160, 90, .44);
  font-family: var(--font-mono);
  font-size: 6.5px;
  font-style: normal;
  letter-spacing: .16em;
}

/* 中央按钮区 */
.brk-deck-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
}

.brk-deck-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.brk-round-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  color: #f6e8cc;
  line-height: 1.1;
  transition: transform .1s ease, box-shadow .16s ease, filter .16s ease;
}

.brk-round-btn.is-red {
  background:
    radial-gradient(circle at 36% 26%, rgba(255, 235, 210, .5), transparent 42%),
    radial-gradient(circle at 50% 62%, #c14c36, #a53426 56%, #6d2018 100%);
  box-shadow:
    inset 0 2px 1px rgba(255, 220, 190, .34),
    inset 0 -5px 9px rgba(0, 0, 0, .42),
    0 4px 0 #4a150f,
    0 8px 14px rgba(0, 0, 0, .45),
    0 0 20px rgba(178, 58, 43, .28);
}

.brk-round-btn.is-dark {
  background:
    radial-gradient(circle at 36% 26%, rgba(255, 240, 205, .34), transparent 42%),
    radial-gradient(circle at 50% 62%, #6b4a28, #4a3018 58%, #2a1b0d 100%);
  box-shadow:
    inset 0 2px 1px rgba(255, 235, 195, .24),
    inset 0 -5px 9px rgba(0, 0, 0, .45),
    0 4px 0 #20130a,
    0 8px 14px rgba(0, 0, 0, .42);
}

.brk-round-btn:hover { filter: brightness(1.09); }

.brk-round-btn:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 1px rgba(255, 220, 190, .22),
    inset 0 -3px 7px rgba(0, 0, 0, .45),
    0 1px 0 #4a150f,
    0 4px 8px rgba(0, 0, 0, .4);
}

.brk-round-btn[disabled] {
  opacity: .42;
  pointer-events: none;
  filter: saturate(.55);
}

.brk-round-en {
  font-family: var(--font-mono);
  font-size: 6.5px;
  letter-spacing: .1em;
  color: rgba(255, 246, 226, .82);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

.brk-round-cn {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

.brk-deck-plate {
  color: rgba(198, 160, 90, .48);
  font-family: var(--font-mono);
  font-size: 6.5px;
  letter-spacing: .22em;
}

/* 右侧投币口 */
.brk-deck-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.brk-coinslot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 5px 9px 4px;
  border: 1px solid rgba(230, 201, 130, .22);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .34), transparent 40%),
    linear-gradient(180deg, #4c3420, #2c1c0e);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, .5),
    0 1px 0 rgba(255, 235, 195, .1);
}

.brk-coinslot-slit {
  display: block;
  width: 34px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, #0a0705, #221610);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, .9),
    0 1px 0 rgba(255, 235, 195, .16);
}

.brk-coinslot em {
  color: rgba(230, 201, 130, .44);
  font-family: var(--font-mono);
  font-size: 5.5px;
  font-style: normal;
  letter-spacing: .14em;
  white-space: nowrap;
}

/* 机台脚注 */
.brk-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 9px;
  color: rgba(198, 160, 90, .4);
  font-size: 8px;
  letter-spacing: .04em;
}

.brk-foot i {
  width: 1px;
  height: 8px;
  background: currentColor;
  opacity: .45;
}

/* ============================================================
   侧栏
   ============================================================ */
.brk-side .paper-card { padding: 15px 15px 14px; }

.brk-score-card .panel-heading { margin-bottom: 9px; }

.brk-score-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.brk-score-label {
  color: rgba(98, 67, 31, .48);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .16em;
}

.brk-score-num {
  color: #3a2714;
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
  transform-origin: left bottom;
}

.brk-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}

.brk-stat-grid > div {
  padding: 6px 9px;
  border: 1px solid rgba(109, 76, 38, .16);
  border-radius: 2px;
  background: rgba(115, 80, 40, .06);
}

.brk-stat-grid em {
  display: block;
  color: rgba(90, 63, 30, .6);
  font-size: 9px;
  font-style: normal;
  letter-spacing: .04em;
}

.brk-stat-grid b {
  display: block;
  color: #3a2714;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.brk-life-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
}

.brk-life-pip {
  display: inline-block;
  width: 22px;
  height: 8px;
  border-radius: 4px;
  border: 1px solid #8f713c;
  background: linear-gradient(180deg, #f3dfae, #c29a5f 58%, #9c7439);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 2px rgba(80, 52, 22, .24);
  transition: opacity .2s ease, filter .2s ease;
}

.brk-life-pip.is-lost {
  border-color: rgba(109, 76, 38, .28);
  background: rgba(90, 63, 30, .12);
  box-shadow: inset 0 1px 2px rgba(90, 63, 30, .16);
  opacity: .8;
}

.brk-progress {
  height: 6px;
  margin-top: 10px;
  border: 1px solid rgba(109, 76, 38, .22);
  border-radius: 3px;
  background: rgba(90, 63, 30, .14);
  overflow: hidden;
}

.brk-progress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255, 245, 215, .4), transparent 60%),
    linear-gradient(90deg, #8f713c, #c6a05a);
  transition: width .28s ease;
}

.brk-record-note {
  margin-top: 8px;
  color: #8d2e22;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .04em;
}

.brk-toolbar {
  margin-top: 11px;
  gap: 6px;
}

.brk-toolbar .btn {
  flex: 1 1 auto;
  justify-content: center;
}

.brk-key-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.brk-key-list li {
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(58, 39, 20, .76);
  font-size: 10.5px;
  line-height: 1.5;
}

.brk-kbd {
  min-width: 19px;
  padding: 2px 5px;
  border: 1px solid rgba(109, 76, 38, .32);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 252, 242, .6), rgba(240, 230, 208, .38));
  color: #5c4327;
  font-family: var(--font-mono);
  font-size: 9.5px;
  line-height: 1.3;
  text-align: center;
}

.brk-kbd.is-wide { min-width: 32px; }

.brk-key-text { font-size: 10px; letter-spacing: .02em; }

.brk-status {
  margin-top: 12px;
  padding: 7px 10px;
  border-left: 2px solid var(--jade);
  background: rgba(47, 111, 98, .1);
  color: #2f5145;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* 规则折叠 */
.brk-rules summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 1px 0 8px;
  border-bottom: 1px solid rgba(95, 64, 30, .18);
  color: #6a4c26;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  cursor: pointer;
  list-style: none;
}

.brk-rules summary::-webkit-details-marker { display: none; }

.brk-rules summary::after {
  content: "＋";
  margin-left: auto;
  color: rgba(98, 67, 31, .5);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
}

.brk-rules[open] summary::after { content: "－"; }

.brk-rules-en {
  color: rgba(98, 67, 31, .42);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: .14em;
}

.brk-rule-list {
  margin-top: 10px;
  font-size: 10.5px;
  line-height: 1.75;
}

/* ---------------- CRT 动画（尊重 reduced-motion） ---------------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes brk-ov-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

  @keyframes brk-flicker {
    0%, 94.6%, 95.4%, 100% { opacity: 1; }
    94.8% { opacity: .965; }
    95.9% { opacity: .985; }
  }

  @keyframes brk-sweep {
    0% { transform: translateY(-120%); }
    100% { transform: translateY(500%); }
  }

  @keyframes brk-marquee-glow {
    0%, 100% {
      text-shadow: 0 0 10px rgba(230, 201, 130, .46), 0 0 24px rgba(217, 154, 76, .26), 0 2px 0 rgba(0, 0, 0, .6);
    }
    50% {
      text-shadow: 0 0 14px rgba(230, 201, 130, .66), 0 0 34px rgba(217, 154, 76, .4), 0 2px 0 rgba(0, 0, 0, .6);
    }
  }

  @keyframes brk-bulb-blink {
    0%, 100% { opacity: .9; }
    50% { opacity: .5; }
  }

  @keyframes brk-score-bump {
    0% { transform: scale(1); }
    36% { transform: scale(1.12); color: #8d2e22; }
    100% { transform: scale(1); }
  }

  @keyframes brk-banner-in {
    0% { opacity: 0; transform: translateX(-50%) scale(.86); }
    18%, 82% { opacity: 1; transform: translateX(-50%) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) scale(1); }
  }

  @keyframes brk-ready-pulse {
    0%, 100% {
      box-shadow:
        inset 0 1px 0 rgba(255, 220, 190, .38),
        0 3px 0 #4a150f,
        0 7px 14px rgba(0, 0, 0, .42),
        0 0 16px rgba(178, 58, 43, .3);
    }
    50% {
      box-shadow:
        inset 0 1px 0 rgba(255, 220, 190, .38),
        0 3px 0 #4a150f,
        0 7px 14px rgba(0, 0, 0, .42),
        0 0 28px rgba(230, 201, 130, .42);
    }
  }

  @keyframes brk-insert-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: .48; }
  }

  .brk-overlay { animation: brk-ov-in .22s ease both; }
  .brk-canvas { animation: brk-flicker 7.5s steps(1) infinite; }
  .brk-sweep { animation: brk-sweep 7s linear infinite; }
  .brk-marquee-en { animation: brk-marquee-glow 3.6s ease-in-out infinite; }
  .brk-bulbs { animation: brk-bulb-blink 2.8s ease-in-out infinite; }
  .brk-score-num.is-bump { animation: brk-score-bump .34s ease; }
  .brk-banner.is-on { animation: brk-banner-in 1.5s ease both; }
  #brk-ready .brk-arcade-btn.is-primary { animation: brk-ready-pulse 2.6s ease-in-out infinite; }
  #brk-ready .brk-ov-en { animation: brk-insert-blink 2.4s steps(1) infinite; }
}

/* ---------------- 响应式 ---------------- */
@media (max-width: 1080px) {
  .brk-cabinet { width: min(100%, 660px); }
  .brk-marquee-en { font-size: 23px; }
}

@media (max-width: 900px) {
  .brk-cabinet { width: min(100%, 700px); }
  .brk-score-num { font-size: 34px; }
}

@media (max-width: 600px) {
  .brk-stage { padding: 10px 8px 14px; }
  .brk-cabinet { width: 100%; }
  .brk-marquee { gap: 7px; padding: 7px 10px 6px; }
  .brk-bulbs { width: 34px; background-size: 11px 9px; }
  .brk-marquee-kicker { font-size: 6px; letter-spacing: .24em; }
  .brk-marquee-en { font-size: 18px; letter-spacing: .24em; text-indent: .24em; }
  .brk-marquee-cn { font-size: 7.5px; letter-spacing: .5em; text-indent: .5em; }
  .brk-monitor { padding: 7px; }
  .brk-monitor::before { inset: 3px; }
  .brk-screen { border-radius: 7px; }
  .brk-screen::after { border-radius: 5px; }
  .brk-screw { width: 5px; height: 5px; }
  .brk-screw.is-tl { left: 4px; top: 4px; }
  .brk-screw.is-tr { right: 4px; top: 4px; }
  .brk-screw.is-bl { left: 4px; bottom: 4px; }
  .brk-screw.is-br { right: 4px; bottom: 4px; }
  .brk-deck { padding: 8px 10px; gap: 8px; border-radius: 0 0 7px 7px; }
  .brk-knob { display: none; }
  .brk-deck-btns { gap: 12px; }
  .brk-round-btn { width: 48px; height: 48px; }
  .brk-round-en { font-size: 6px; }
  .brk-round-cn { font-size: 9px; }
  .brk-deck-plate { display: none; }
  .brk-coinslot { padding: 4px 7px 3px; gap: 4px; }
  .brk-coinslot-slit { width: 26px; }
  .brk-foot { font-size: 7px; gap: 5px; margin-top: 7px; }
  .brk-foot i { height: 7px; }
  .brk-side .paper-card { padding: 13px 13px 12px; }
  .brk-score-num { font-size: 32px; }
  .brk-stat-grid b { font-size: 14px; }
  .brk-banner { padding: 7px 16px 6px; }
  .brk-ov-hint { line-height: 1.75; }
  .brk-arcade-btn { min-height: 32px; padding: 6px 16px; }
}

@media (max-width: 380px) {
  .brk-marquee-kicker { display: none; }
  .brk-bulbs { width: 22px; }
  .brk-marquee-en { font-size: 16px; letter-spacing: .2em; text-indent: .2em; }
  .brk-deck { padding: 7px 8px; }
  .brk-round-btn { width: 44px; height: 44px; }
  .brk-deck-btns { gap: 9px; }
  .brk-coinslot { display: none; }
  .brk-foot { font-size: 6.5px; }
  .brk-score-num { font-size: 30px; }
  .brk-ov-foot { display: none; }
}

/* 全屏模式：把机台放大一点，让画面吃满高度 */
body.focus-mode .brk-cabinet { width: min(100%, 1080px); }
body.focus-mode .brk-stage { padding: 8px; }

@media (max-width: 600px) {
  body.focus-mode .brk-stage { padding: 5px; }
  body.focus-mode .brk-foot { display: none; }
}