[hidden] { display: none !important; }

.kxl-page { overflow: hidden; }
.kxl-header { padding-bottom: 14px; }
.kxl-setup { padding-top: 18px; }
.kxl-time-fields { margin-top: 8px; }
.kxl-time-row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 15px; margin-bottom: 4px; }
.kxl-time-fields .time-select-row { display: flex; align-items: center; gap: 5px; }
.kxl-time-fields .time-select-row .sys-select { width: auto; flex: 1; min-width: 0; }
.kxl-time-fields .time-separator { line-height: 36px; }
.kxl-mode-field { margin-top: 18px; }
.kxl-setup-actions { margin-top: 24px; }
.kxl-message {
  min-height: 22px;
  margin-top: 10px;
  color: var(--cinnabar);
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}
.kxl-draw { padding: 0 20px 28px; }
.kxl-draw-summary {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0 14px;
  border-bottom: 1px solid var(--line-faint);
}
.kxl-summary-value { margin-top: 2px; color: var(--ink-main); font-size: 14px; line-height: 1.7; }
.kxl-text-button {
  flex: none;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--ink-light);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 1px;
  cursor: pointer;
}
.kxl-text-button:hover:not(:disabled) { color: var(--cinnabar); }
.kxl-text-button:disabled { opacity: .45; cursor: default; }
.kxl-text-button:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: 3px; }
.kxl-spread-wrap { padding-top: 6px; }
.kxl-subhead-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kxl-subhead-row h2 { margin: 0; font-family: var(--font-display); font-size: 17px; letter-spacing: 2px; }
.kxl-status { color: var(--ink-light); font-size: 12px; letter-spacing: 1px; }
.kxl-spread-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: min(100%, 480px);
  margin: 6px auto 0;
  align-items: start;
}
.kxl-spread-board.is-double { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 320px); }
.kxl-spread-board.is-three-base { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: min(100%, 420px); }
.kxl-spread-board.is-three { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, 520px); }
.kxl-spread-board.is-cross {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  gap: 7px;
  width: min(100%, 560px);
}
.kxl-spread-board.is-nine { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kxl-spread-board.is-nine .kxl-slot-card { width: min(100%, 94px); }
.kxl-spread-board.is-twelve {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  gap: 8px;
  width: min(100%, 520px);
}
.kxl-spread-board.is-twelve [data-slot-index="0"] { grid-column: 1; grid-row: 4; }
.kxl-spread-board.is-twelve [data-slot-index="1"] { grid-column: 2; grid-row: 4; }
.kxl-spread-board.is-twelve [data-slot-index="2"] { grid-column: 3; grid-row: 4; }
.kxl-spread-board.is-twelve [data-slot-index="3"] { grid-column: 4; grid-row: 4; }
.kxl-spread-board.is-twelve [data-slot-index="4"] { grid-column: 4; grid-row: 3; }
.kxl-spread-board.is-twelve [data-slot-index="5"] { grid-column: 4; grid-row: 2; }
.kxl-spread-board.is-twelve [data-slot-index="6"] { grid-column: 4; grid-row: 1; }
.kxl-spread-board.is-twelve [data-slot-index="7"] { grid-column: 3; grid-row: 1; }
.kxl-spread-board.is-twelve [data-slot-index="8"] { grid-column: 2; grid-row: 1; }
.kxl-spread-board.is-twelve [data-slot-index="9"] { grid-column: 1; grid-row: 1; }
.kxl-spread-board.is-twelve [data-slot-index="10"] { grid-column: 1; grid-row: 2; }
.kxl-spread-board.is-twelve [data-slot-index="11"] { grid-column: 1; grid-row: 3; }
.kxl-slot { min-width: 0; text-align: center; }
.kxl-slot.is-empty { opacity: 1; }
.kxl-slot-label {
  min-height: 16px;
  margin-bottom: 1px;
  color: var(--ink-main);
  font-size: 11px;
  letter-spacing: 1px;
  line-height: 1.5;
}
.kxl-slot-card {
  position: relative;
  display: block;
  width: min(100%, 132px);
  margin-inline: auto;
  aspect-ratio: 1200 / 1700;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  cursor: zoom-in;
}
.kxl-slot-card img { display: block; width: 100%; height: 100%; object-fit: cover; box-shadow: 0 3px 8px rgba(42, 31, 20, .12); }
.kxl-slot-card.is-back img { filter: saturate(.84); }
.kxl-slot-card.is-revealed { animation: kxl-reveal .55s ease both; }
.kxl-slot-card.is-pending { cursor: default; }
.kxl-slot-card.is-pending::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(207, 56, 56, .58); }
.kxl-slot-facts {
  min-height: 26px;
  padding-top: 5px;
  color: var(--ink-main);
  line-height: 1.45;
}
.kxl-slot-facts span {
  display: block;
  color: var(--ink-main);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}
.kxl-deck-panel { position: relative; margin-top: 14px; padding-bottom: 4px; }
.kxl-deck-actions { display: flex; justify-content: center; margin-top: 5px; }
.kxl-deck-grid {
  display: flex;
  align-items: flex-start;
  gap: 0;
  width: calc(100% + 28px);
  min-height: 112px;
  margin: 10px -14px 0;
  padding: 0 14px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.kxl-deck-grid::-webkit-scrollbar { display: none; }
.kxl-deck-card {
  position: relative;
  z-index: 1;
  flex: 0 0 clamp(58px, 18.5vw, 72px);
  min-width: 0;
  margin: 0 0 0 -22px;
  aspect-ratio: 1122 / 1612;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  scroll-snap-align: start;
  transform: translateY(var(--fan-y, 0px)) rotate(var(--fan-rotate, 0deg));
  transform-origin: center bottom;
  transition: transform .22s ease, filter .22s ease, opacity .22s ease;
}
.kxl-deck-card:first-child { margin-left: 0; }
.kxl-deck-card:hover:not(:disabled) { transform: translateY(calc(var(--fan-y, 0px) - 5px)) rotate(var(--fan-rotate, 0deg)); filter: drop-shadow(0 8px 8px rgba(42, 31, 20, .18)); }
.kxl-deck-card:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: 2px; z-index: 50 !important; }
.kxl-deck-card:disabled { opacity: .28; cursor: default; filter: grayscale(.35); }
.kxl-deck-card img { display: block; width: 100%; height: 100%; object-fit: cover; border: 1px solid rgba(74, 58, 38, .2); box-shadow: 0 2px 5px rgba(42, 31, 20, .1); }
.kxl-deck-grid.is-shuffling { overflow: hidden; touch-action: none; scroll-snap-type: none; }
.kxl-deck-grid.is-shuffling .kxl-deck-card { pointer-events: none; }
.kxl-deck-grid.is-shuffling .kxl-deck-card:not(.is-shuffle-active) { visibility: hidden; }
.kxl-deck-grid.is-dealing .kxl-deck-card { pointer-events: none; will-change: transform; }
.kxl-deck-card.is-departing { pointer-events: none; }
#spreadBoard .kxl-slot-card.is-arriving { opacity: 0; }
.kxl-flying-card {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  transform-origin: center;
  transition: transform .62s cubic-bezier(.22,.72,.28,1), opacity .62s ease;
  box-shadow: 0 18px 28px rgba(42, 31, 20, .24);
}
.kxl-flying-card img { display: block; width: 100%; height: 100%; object-fit: cover; border: 1px solid rgba(74, 58, 38, .35); }
.kxl-draw-actions { margin-top: 24px; }
.kxl-result { padding-top: 0; }
.kxl-result #fourPillars { margin-top: 26px; }
.kxl-result #resultBoard { margin-top: 26px; }
.kxl-result-supplement { display: flex; justify-content: center; margin-top: 20px; }
.kxl-result .kxl-spread-board { margin-top: 10px; }
.kxl-result .kxl-deck-panel { display: none; }

/* 抽牌预览独立紧凑，结果牌阵维持正常尺寸。 */
#spreadBoard .kxl-spread-board { margin-top: 0; }
#spreadBoard .kxl-spread-board.is-three-base { gap: 8px; width: min(100%, 276px); }
#spreadBoard .kxl-slot-label { min-height: 16px; margin-bottom: 1px; }
#spreadBoard .kxl-slot-card { width: min(100%, 84px); }
#spreadBoard .kxl-spread-board.is-double .kxl-slot-card { width: min(100%, 92px); }
#spreadBoard .kxl-slot-facts { min-height: 0; padding-top: 0; }

/* 十字牌阵：纵向第一盘、横向第二盘，共用人宫。 */
.kxl-spread-board.is-cross .kxl-slot--cross-tian1 { grid-column: 3; grid-row: 1; }
.kxl-spread-board.is-cross .kxl-slot--cross-ren { grid-column: 3; grid-row: 3; }
.kxl-spread-board.is-cross .kxl-slot--cross-di1 { grid-column: 3; grid-row: 5; }
.kxl-spread-board.is-cross .kxl-slot--cross-tian2 { grid-column: 1; grid-row: 3; }
.kxl-spread-board.is-cross .kxl-slot--cross-di2 { grid-column: 5; grid-row: 3; }
.kxl-spread-board.is-cross .kxl-slot--cross-supp1 { grid-column: 3; grid-row: 4; }
.kxl-spread-board.is-cross .kxl-slot--cross-supp2 { grid-column: 4; grid-row: 3; }
.kxl-spread-board.is-cross { row-gap: 2px; }
.kxl-spread-board.is-cross .kxl-slot-label { min-height: 16px; margin-bottom: 1px; line-height: 1.4; }
.kxl-spread-board.is-cross .kxl-slot-facts { min-height: 20px; padding-top: 2px; }

/* High-count draw previews remain visible beneath the single-row card rail. */
#spreadBoard .kxl-spread-board.is-cross { width: min(100%, 292px); column-gap: 4px; row-gap: 1px; }
#spreadBoard .kxl-spread-board.is-cross .kxl-slot-card { width: min(100%, 42px); }
#spreadBoard .kxl-spread-board.is-cross .kxl-slot-label { min-height: 14px; font-size: 9px; line-height: 1.35; }
#spreadBoard .kxl-spread-board.is-nine { width: min(100%, 300px); gap: 4px; }
#spreadBoard .kxl-spread-board.is-nine .kxl-slot-card { width: min(100%, 48px); }
#spreadBoard .kxl-spread-board.is-nine .kxl-slot-label { min-height: 14px; font-size: 9px; line-height: 1.35; }
#spreadBoard .kxl-spread-board.is-twelve { width: min(100%, 322px); gap: 2px; }
#spreadBoard .kxl-spread-board.is-twelve .kxl-slot-card { width: min(100%, 32px); }
#spreadBoard .kxl-spread-board.is-twelve .kxl-slot-label { min-height: 14px; font-size: 9px; line-height: 1.35; }
.kxl-dialog-card-image { width: min(100%, 360px); margin: 0 auto; display: block; }
.kxl-dialog-card-meta { margin-top: 10px; color: var(--ink-main); font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0; line-height: 1.5; text-align: center; white-space: nowrap; }

@keyframes kxl-reveal { 0% { transform: rotateY(90deg); opacity: .15; } 100% { transform: rotateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .kxl-flying-card { transition: none; }
  .kxl-slot-card.is-revealed { animation: none; }
}
@media (max-width: 640px) {
  .kxl-draw { padding-left: 14px; padding-right: 14px; }
  .kxl-draw-summary { padding-top: 12px; }
  .kxl-spread-board { gap: 8px; }
  .kxl-spread-board.is-three { gap: 6px; }
.kxl-spread-board.is-three { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kxl-spread-board.is-cross { column-gap: 4px; row-gap: 2px; }
  .kxl-slot-label { font-size: 10px; letter-spacing: 0; }
  .kxl-slot-facts { min-height: 24px; }
  .kxl-slot-facts span { font-size: 13px; }
  .kxl-spread-board.is-three .kxl-slot-facts span { font-size: 10px; }
  .kxl-spread-board.is-cross .kxl-slot-facts span { font-size: 9px; }
  .kxl-spread-board.is-nine .kxl-slot-facts span { font-size: 11px; }
  .kxl-spread-board.is-twelve .kxl-slot-facts span { font-size: 10px; }
  .kxl-deck-grid { gap: 8px; margin-top: 10px; }
  .kxl-result { padding-left: 14px; padding-right: 14px; }
}