/* Crafted cabinet. Load after styles.css; all overrides stay inside the machine. */
.machine-panel {
  --cabinet-gold: #dfc089;
  --cabinet-ink: #352318;
  --cabinet-cream: #f3e8ce;
  position: relative;
  isolation: isolate;
  min-width: 0;
  padding: 22px 26px 19px;
  border: 2px solid #a98a55;
  border-radius: 132px 132px 24px 24px / 55px 55px 24px 24px;
  color: #f1e2c4;
  background:
    radial-gradient(ellipse at 45% -10%, #77573755, transparent 55%),
    repeating-linear-gradient(91deg, #180e0b00 0 11px, #9c694b09 12px, #160b0a12 15px 19px),
    linear-gradient(110deg, #301b16 0%, #452a1d 18%, #21130f 42%, #362018 72%, #21120e);
  box-shadow:
    0 16px 32px #080b0c55,
    0 3px 0 #29180f,
    inset 0 0 0 3px #2d1c14,
    inset 0 0 0 5px #c6a46c,
    inset 0 0 0 7px #493120,
    inset 0 0 0 9px #8e6a3b,
    inset 0 18px 35px #f4d4a608;
}
.machine-panel::before,
.machine-panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.machine-panel::before {
  inset: 14px;
  border: 1px solid #b892544a;
  border-radius: 122px 122px 13px 13px / 44px 44px 13px 13px;
  background:
    linear-gradient(90deg, #dcbd8030 1px, transparent 1px) 0 65px / 5px calc(100% - 83px) no-repeat,
    linear-gradient(90deg, transparent 4px, #dcbd8030 4px) 100% 65px / 5px calc(100% - 83px) no-repeat;
}
.machine-panel::after {
  left: 21px;
  right: 21px;
  bottom: 10px;
  height: 3px;
  border-top: 1px solid #e3c89177;
  border-bottom: 1px solid #906333;
  border-radius: 50%;
}
.machine-panel .cabinet-crest {
  width: 180px;
  height: 40px;
  margin: 0 auto 2px;
  color: #dfc18b;
  filter: drop-shadow(0 1px 0 #120a07);
}
.machine-panel .cabinet-crest svg { display: block; width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.15; }
.machine-panel .machine-title { display: block; text-align: center; }
.machine-panel .cabinet-nameplate {
  position: relative;
  width: max-content;
  max-width: 100%;
  margin: auto;
  padding: 6px 36px 12px;
  border-bottom: 1px solid #b797616b;
  background: radial-gradient(ellipse, #110d0b55, transparent 72%);
}
.machine-panel .cabinet-nameplate::before,
.machine-panel .cabinet-nameplate::after {
  content: "✧";
  position: absolute;
  top: 30px;
  color: #c8a767;
  font-size: 22px;
}
.machine-panel .cabinet-nameplate::before { left: 5px; }
.machine-panel .cabinet-nameplate::after { right: 5px; }
.machine-panel .eyebrow { margin: 0 0 4px; color: #dac194; font: 10px Georgia, serif; letter-spacing: .24em; }
.machine-panel .machine-title h2 {
  color: #f6e5bb;
  font-family: "Noto Serif TC", "Songti TC", "PMingLiU", DrHsuTC, Georgia, serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.4;
  text-indent: .18em;
  text-shadow: 0 2px 1px #130a07, 0 -1px 0 #ffedc34d;
}
.machine-panel .cabinet-serial { display: block; margin-top: 4px; color: #bca177; font: 8px Georgia, serif; letter-spacing: .19em; }
.machine-panel .cabinet-lamps { display: flex; align-items: center; justify-content: center; gap: 17px; margin: 15px auto 11px; }
.machine-panel .cabinet-lamps i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid #f8dfaa;
  background: radial-gradient(circle at 35% 25%, #fff6d9, #f1ca7c 60%, #a77533);
  box-shadow: 0 0 3px #ffe6b1, 0 0 10px #ffc96455, 0 0 0 3px #28190f, 0 0 0 4px #947345;
}
.machine-panel .machine-intro { margin: 0; color: #ddcbb0; font-size: 12px; text-align: center; letter-spacing: .025em; }
.machine-panel .machine-body { display: flex; align-items: center; gap: 11px; margin: 21px 0 16px; }
.machine-panel .reel-frame {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 13px;
  border: 1px solid #e8c994;
  border-radius: 17px;
  background:
    repeating-linear-gradient(112deg, #ffffff09 0 1px, transparent 1px 4px),
    linear-gradient(122deg, #e0c590, #89653b 17%, #d7b984 32%, #ead1a0 48%, #b28c53 68%, #614222);
  box-shadow:
    0 3px 0 #0f0907,
    0 6px 12px #10080666,
    inset 0 0 0 2px #50351f,
    inset 0 0 0 4px #e5c892,
    inset 0 0 0 5px #866139;
}
.machine-panel .reel-frame::before,
.machine-panel .reel-frame::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #674629;
  box-shadow: 0 1px 0 #f5ddb6, 0 169px 0 #674629;
}
.machine-panel .reel-frame::before { left: 6px; }
.machine-panel .reel-frame::after { right: 6px; }
.machine-panel .reel {
  min-width: 0;
  height: 160px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid #523822;
  border-radius: 8px;
  color: #38281c;
  background:
    linear-gradient(90deg, #d7c8a68a, transparent 18%, #fffdf240 48%, transparent 85%, #bea98088),
    linear-gradient(180deg, #bca580 0%, #e5d8b9 11%, #f8f2df 30%, #f6efdb 72%, #d9c7a2 94%, #b89b72);
  box-shadow: inset 0 3px 6px #24180e55, inset 1px 0 2px #452b1544, inset -1px 0 2px #452b1544, 0 1px 0 #f6ddb3;
}
.machine-panel .reel::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  height: auto;
  background: linear-gradient(180deg, #48321b44, transparent 22%, transparent 75%, #5c401f22);
  border: 3px solid #fffaf512;
  border-radius: 7px;
  pointer-events: none;
}
.machine-panel .reel::after {
  content: "";
  position: absolute;
  inset: auto 8px 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #8a704c77, transparent);
  pointer-events: none;
}
.machine-panel .reel-content { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; width: 100%; padding: 0 3px 17px; }
.machine-panel .reel-content b { display: block; max-width: 100%; font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: .01em; white-space: normal; text-align: center; overflow-wrap: anywhere; }
.machine-panel .reel small { position: absolute; z-index: 3; bottom: 8px; color: #6b5235; font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.machine-panel .reel-icon { display: block; width: 75px; height: 75px; max-width: 100%; filter: brightness(.94) contrast(1.08) drop-shadow(0 0 1px #39271b) drop-shadow(0 3px 3px #4f3a2466); }
.machine-panel .rarity-gem { color: #a77830; font-size: 52px; line-height: 75px; text-shadow: 0 1px 0 #694626, 0 0 1px #37261c; -webkit-text-stroke: .6px #7c5a34; }
.machine-panel .set-symbol { color: #7a4528; font: italic 49px/75px Georgia, serif; text-shadow: 0 1px 0 #fffbec; }
.machine-panel .lever {
  display: block;
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 154px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: transparent;
  transform-origin: 18px 133px;
  transition: transform .24s cubic-bezier(.3,.1,.2,1), filter .2s;
}
.machine-panel .lever-ball {
  position: absolute;
  z-index: 3;
  top: 1px;
  left: 2px;
  width: 36px;
  height: 36px;
  border: 1px solid #c6a16a;
  border-radius: 50%;
  background: radial-gradient(circle at 29% 22%, #ffdab7 0, #e58165 9%, #bb3935 23%, #832422 52%, #3b1012 82%);
  box-shadow: 0 3px 3px #10070666, inset -3px -3px 6px #2b080955, inset 1px 1px 2px #ffe4bd99;
}
.machine-panel .lever-ball::after { content: ""; position: absolute; bottom: -5px; left: 13px; width: 9px; height: 5px; border: 1px solid #634422; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, #6f4b26, #eacb91, #8b6132); }
.machine-panel .lever-arm {
  position: absolute;
  top: 32px;
  left: 17px;
  width: 8px;
  height: 103px;
  border: 1px solid #806237;
  border-radius: 4px;
  background: linear-gradient(90deg, #775731, #e7cf9c 35%, #fcf0c8 49%, #a07c43 78%, #5d3e22);
  transform: rotate(3deg);
  transform-origin: bottom;
  box-shadow: 2px 2px 3px #160b0a77;
}
.machine-panel .lever-base {
  position: absolute;
  left: 1px;
  bottom: 0;
  width: 37px;
  height: 41px;
  border: 1px solid #d5b77f;
  border-radius: 50%;
  background: radial-gradient(ellipse at 32% 25%, #efdbac, #b38b50 38%, #78502b 70%, #322013);
  box-shadow: 0 3px 5px #0e080866, inset 0 0 0 3px #5f422a, inset 0 0 0 4px #c9ab70;
}
.machine-panel .lever-base::after { content: ""; position: absolute; inset: 13px 11px; border: 1px solid #f3dba7; border-radius: 50%; background: #624329; box-shadow: 0 1px 2px #23130c; }
.machine-panel .lever.pulled { transform: rotate(24deg) translateY(6px); }
.machine-panel .lever:hover:enabled { filter: brightness(1.15); }
.machine-panel .lever:disabled { opacity: .72; }
.machine-panel .cabinet-ticket-strip { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 13px; }
.machine-panel .cabinet-ticket-strip b { color: #d0b487; font-size: 10px; font-weight: 500; letter-spacing: .12em; }
.machine-panel .cabinet-ticket-strip span { width: 35px; height: 1px; background: linear-gradient(90deg, transparent, #ae8850); }
.machine-panel .cabinet-ticket-strip span:last-child { transform: rotate(180deg); }
.machine-panel .machine-controls { display: flex; gap: 9px; align-items: stretch; }
.machine-panel .machine-controls .primary-button {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 47px;
  padding: 11px 15px;
  border: 1px solid #ecd5a7;
  border-radius: 6px;
  color: #352515;
  background:
    repeating-linear-gradient(110deg, #fff8e909 0 1px, transparent 1px 3px),
    linear-gradient(125deg, #e6c997, #f1dfb7 33%, #c6a165 74%, #b68d51);
  box-shadow: 0 3px 0 #6b4526, 0 5px 8px #10090655, inset 0 0 0 2px #9a733d, inset 0 0 0 3px #efdab1;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .035em;
  text-shadow: 0 1px 0 #fff8de99;
  transition: filter .15s, transform .15s, box-shadow .15s;
}
.machine-panel .machine-controls .primary-button:hover:enabled { filter: brightness(1.1); }
.machine-panel .machine-controls .primary-button:active:enabled { transform: translateY(2px); box-shadow: 0 1px 0 #6b4526, inset 0 0 0 2px #9a733d, inset 0 0 0 3px #efdab1; }
.machine-panel .machine-controls .primary-button:disabled { opacity: .82; color: #51432d; filter: saturate(.7); }
.machine-panel .sound-button { min-width: 58px; padding: 8px; border: 1px solid #8d6e43; border-radius: 6px; background: linear-gradient(#34251b, #21160f); color: #e2cda8; font-size: 11px; box-shadow: inset 0 0 0 2px #1c120d, inset 0 0 0 3px #85633b66; }
.machine-panel .sound-button[aria-pressed="true"] { color: #fff1c9; border-color: #d0ae72; }
.machine-panel .pity-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 18px; font-size: 10px; line-height: 1.5; }
.machine-panel .pity-row span { display: block; padding: 7px 3px; border: 1px solid #9b774c55; border-radius: 4px; background: #130c0855; color: #e0c89f; text-align: center; font-variant-numeric: tabular-nums; }
.machine-panel .pity-row span:nth-child(2) { color: #f1d295; }
.machine-panel .pity-row span:nth-child(3) { color: #e1c6df; }
.machine-panel .reward-placeholder { min-height: 53px; margin: 13px 0 0; padding: 12px 5px 8px; border-top: 1px solid #b7925355; color: #dfcdad; font-size: 12px; line-height: 1.6; text-align: center; }
.machine-panel .tiny-star { flex-shrink: 0; color: #c7a671; font-size: 23px; }
.machine-panel .cabinet-footer { display: flex; gap: 9px; justify-content: space-between; align-items: center; margin-top: 7px; border-top: 1px solid #95704533; padding-top: 11px; }
.machine-panel .cabinet-footer > span { color: #bca078; font: 8px Georgia, serif; letter-spacing: .09em; }
.machine-panel .cabinet-footer b { color: #d4b889; font-weight: 400; letter-spacing: .12em; }
.machine-panel .text-button { padding: 4px 0; color: #e2c391; font-size: 11px; text-decoration: underline; text-decoration-color: #ad865655; text-underline-offset: 4px; white-space: nowrap; }
.machine-panel button:focus-visible { outline: 2px solid #fff1bd; outline-offset: 5px; }
.machine-panel.drawing .cabinet-lamps i { animation: cabinet-lamp-glow .7s ease-in-out infinite alternate; }
.machine-panel.drawing .cabinet-lamps i:nth-child(even) { animation-delay: .35s; }
@keyframes cabinet-lamp-glow { from { filter: brightness(.75); } to { filter: brightness(1.35); box-shadow: 0 0 5px #fff0c3, 0 0 15px #ffc96488, 0 0 0 3px #28190f, 0 0 0 4px #947345; } }
@media (max-width: 1100px) {
  .machine-panel { padding: 21px 23px 18px; }
  .machine-panel .reel-frame { padding: 11px; gap: 6px; }
  .machine-panel .reel-content b { font-size: 12px; }
  .machine-panel .reel-icon { width: 70px; height: 70px; }
}
@media (max-width: 760px) {
  .machine-panel { padding: 20px 21px 18px; }
  .machine-panel .machine-body { gap: 10px; }
  .machine-panel .reel-frame { padding: 12px; gap: 7px; }
  .machine-panel .reel-icon { width: 73px; height: 73px; }
}
@media (max-width: 420px) {
  .machine-panel { padding: 20px 20px 17px; border-radius: 100px 100px 20px 20px / 44px 44px 20px 20px; }
  .machine-panel .cabinet-crest { width: 153px; height: 34px; }
  .machine-panel .cabinet-nameplate { padding: 5px 21px 10px; }
  .machine-panel .cabinet-nameplate::before { left: 0; }
  .machine-panel .cabinet-nameplate::after { right: 0; }
  .machine-panel .eyebrow { font-size: 9px; letter-spacing: .2em; }
  .machine-panel .machine-title h2 { font-size: 28px; }
  .machine-panel .cabinet-serial { font-size: 7px; letter-spacing: .14em; }
  .machine-panel .cabinet-lamps { gap: 16px; }
  .machine-panel .machine-intro { font-size: 11px; }
  .machine-panel .machine-body { gap: 7px; margin: 18px 0 15px; }
  .machine-panel .reel-frame { padding: 10px; gap: 5px; border-radius: 13px; }
  .machine-panel .reel { height: 150px; border-radius: 6px; }
  .machine-panel .reel-content b { font-size: 11px; }
  .machine-panel .reel-icon { width: 61px; height: 61px; }
  .machine-panel .reel small { font-size: 10px; letter-spacing: .02em; }
  .machine-panel .rarity-gem { font-size: 43px; line-height: 61px; }
  .machine-panel .set-symbol { font-size: 42px; line-height: 61px; }
  .machine-panel .lever { flex-basis: 33px; width: 33px; height: 149px; }
  .machine-panel .lever-ball { left: 0; width: 32px; height: 32px; }
  .machine-panel .lever-ball::after { left: 11px; }
  .machine-panel .lever-arm { left: 14px; top: 29px; height: 105px; }
  .machine-panel .lever-base { left: 0; width: 32px; height: 37px; }
  .machine-panel .lever-base::after { inset: 12px 9px; }
  .machine-panel .machine-controls .primary-button { padding: 12px 9px; font-size: 12px; letter-spacing: 0; }
  .machine-panel .sound-button { min-width: 51px; font-size: 10px; }
  .machine-panel .pity-row { gap: 5px; }
  .machine-panel .pity-row span { padding: 7px 2px; }
  .machine-panel .cabinet-footer { gap: 5px; }
  .machine-panel .cabinet-footer > span { font-size: 7px; letter-spacing: .025em; }
}
@media (max-width: 350px) {
  .machine-panel { padding-left: 17px; padding-right: 17px; }
  .machine-panel .cabinet-lamps { gap: 12px; }
  .machine-panel .machine-intro { font-size: 10px; letter-spacing: 0; }
  .machine-panel .reel-frame { padding: 8px; gap: 4px; }
  .machine-panel .reel-icon { width: 53px; height: 53px; }
  .machine-panel .reel-content b { font-size: 10px; }
  .machine-panel .reel small { font-size: 9px; }
  .machine-panel .machine-controls { gap: 7px; }
  .machine-panel .machine-controls .primary-button { font-size: 11px; padding-left: 6px; padding-right: 6px; }
  .machine-panel .cabinet-footer > span { max-width: 140px; line-height: 1.6; }
}
@media (prefers-reduced-motion: reduce) {
  .machine-panel .lever,
  .machine-panel .primary-button { transition: none; }
  .machine-panel.drawing .cabinet-lamps i,
  .machine-panel .reel.spinning .reel-content,
  .machine-panel .reel.stopped .reel-content { animation: none !important; filter: none; }
}

/* ── v16：收藏品揭曉（拉霸約 6 秒）── */
.machine-panel .reel.slowing .reel-content { animation: reel-spin .34s linear infinite; filter: blur(.4px); }
.machine-panel .reel.suspense .reel-content { animation: reel-spin .62s ease-in-out infinite; filter: none; }
.machine-panel .reel.suspense { animation: reel-heartbeat .64s ease-in-out infinite; box-shadow: inset 0 3px 6px #24180e55, 0 0 0 1px #f3d99b88, 0 0 22px #f3d99b66; }
@keyframes reel-heartbeat { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.025); } }
.machine-panel .reel.locked { animation: reel-lock .9s cubic-bezier(.2, .8, .2, 1) both; box-shadow: inset 0 3px 6px #24180e55, 0 0 0 1px color-mix(in srgb, var(--reel-glow, #f3d99b) 70%, #fff), 0 0 18px color-mix(in srgb, var(--reel-glow, #f3d99b) 55%, transparent); }
.machine-panel .reel.locked::before { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--reel-glow, #f3d99b) 45%, transparent); }
@keyframes reel-lock { 0% { filter: brightness(1.9) saturate(1.3); } 35% { filter: brightness(1.15); } 100% { filter: brightness(1); } }
.machine-panel.reveal .reel-frame { position: relative; overflow: hidden; box-shadow: 0 0 0 4px #0a151b, 0 0 34px color-mix(in srgb, var(--reveal, #f3d99b) 55%, transparent), inset 0 0 26px color-mix(in srgb, var(--reveal, #f3d99b) 28%, transparent); transition: box-shadow .4s; }
.machine-panel.reveal .reel-frame::after { content: ""; position: absolute; inset: -20% -60%; left: auto; right: auto; width: 45%; background: linear-gradient(105deg, transparent 20%, #fff8e6b0 50%, transparent 80%); mix-blend-mode: screen; pointer-events: none; animation: reel-sweep .95s cubic-bezier(.4, 0, .2, 1) 1; }
@keyframes reel-sweep { 0% { transform: translateX(-180%) skewX(-12deg); } 100% { transform: translateX(380%) skewX(-12deg); } }
.machine-panel.reveal .cabinet-lamps i { animation: lamp-chase .35s linear 4; }
@keyframes lamp-chase { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(2.2); } }
@media (prefers-reduced-motion: reduce) { .machine-panel .reel.slowing .reel-content, .machine-panel .reel.suspense .reel-content, .machine-panel .reel.suspense, .machine-panel .reel.locked, .machine-panel.reveal .reel-frame::after, .machine-panel.reveal .cabinet-lamps i { animation: none !important; } }
