:root {
  --bg-deep: #0c1713;
  --bg-mid: #183429;
  --bg-soft: #315140;
  --mist: rgba(255, 233, 187, 0.14);
  --gold: #f5d089;
  --gold-strong: #ffde9f;
  --ink: #f6eedc;
  --ink-muted: rgba(246, 238, 220, 0.76);
  --panel: rgba(14, 21, 18, 0.68);
  --panel-strong: rgba(10, 16, 14, 0.9);
  --line: rgba(255, 227, 166, 0.18);
  --danger: #f28772;
  --shadow: 0 28px 70px rgba(0, 0, 0, 0.4);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --card-width: clamp(184px, 59vw, 240px);
  --card-ratio: 0.72;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #18362c;
}

body {
  position: relative;
  isolation: isolate;
  margin: 0;
  width: 100%;
  height: var(--app-height, 100svh);
  min-height: var(--app-height, 100svh);
  overflow: hidden;
  overscroll-behavior: none;
  font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: #18362c;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 245, 214, 0.22), rgba(255, 225, 164, 0.08) 18%, transparent 42%),
    linear-gradient(180deg, rgba(6, 10, 8, 0.08), rgba(6, 10, 8, 0.26)),
    repeating-linear-gradient(
      112deg,
      rgba(255, 250, 240, 0.016) 0 2px,
      transparent 2px 10px
    ),
    repeating-linear-gradient(
      22deg,
      rgba(0, 0, 0, 0.055) 0 4px,
      transparent 4px 14px
    ),
    linear-gradient(180deg, #214438 0%, #18362c 48%, #10241d 100%);
}

body.panel-open {
  overflow: hidden;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: var(--app-height, 100svh);
  min-height: var(--app-height, 100svh);
  overflow: hidden;
  padding:
    max(10px, env(safe-area-inset-top))
    12px
    calc(12px + env(safe-area-inset-bottom));
}

@supports (height: 100dvh) {
  body {
    height: var(--app-height, 100dvh);
    min-height: var(--app-height, 100dvh);
  }
}

.app-shell::before,
.app-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.app-shell::before {
  background:
    radial-gradient(
      ellipse at 50% 14%,
      rgba(255, 246, 216, 0.26) 0%,
      rgba(255, 228, 174, 0.14) 16%,
      rgba(255, 228, 174, 0.05) 30%,
      transparent 56%
    );
  filter: blur(12px);
}

.app-shell::after {
  opacity: 0.22;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 248, 232, 0.012) 0 1px,
      transparent 1px 14px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.03) 0 2px,
      transparent 2px 16px
    );
}

.ambience {
  position: absolute;
  inset: auto;
  width: 30rem;
  height: 30rem;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(46px);
  opacity: 0.26;
}

.ambience--left {
  left: -15rem;
  top: -13rem;
  background: radial-gradient(circle, rgba(255, 220, 159, 0.28) 0%, transparent 70%);
}

.ambience--right {
  right: -14rem;
  bottom: -13rem;
  background: radial-gradient(circle, rgba(117, 188, 155, 0.18) 0%, transparent 70%);
}

.topbar,
.layout {
  position: relative;
  z-index: 1;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.brand {
  display: grid;
  gap: 4px;
}

.brand__eyebrow,
.overlay-panel__eyebrow {
  margin: 0 0 6px;
  letter-spacing: 0.28em;
  font-size: 0.78rem;
  color: rgba(255, 226, 170, 0.72);
}

.brand h1,
.overlay-panel h2,
.dialog h2 {
  margin: 0;
  font-family: "Baskerville Old Face", "Songti SC", "STSong", serif;
  letter-spacing: 0.02em;
}

.brand h1 {
  font-size: clamp(1.65rem, 7vw, 2.05rem);
  line-height: 1;
}

.brand__copy {
  display: none;
}

.topbar__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
}

.chrome-button,
.action-button,
.mode-tab,
.close-button,
.sort-fallback,
.center-hint__button {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease,
    background-color 180ms ease;
}

.chrome-button,
.mode-tab,
.action-button,
.sort-fallback,
.center-hint__button {
  background:
    linear-gradient(180deg, rgba(255, 250, 241, 0.1), rgba(255, 250, 241, 0.04)),
    rgba(13, 21, 18, 0.22);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 232, 0.08),
    inset 0 0 0 1px rgba(255, 228, 173, 0.12);
}

.chrome-button:hover,
.action-button:hover,
.mode-tab:hover,
.sort-fallback:hover,
.center-hint__button:hover,
.close-button:hover {
  transform: translateY(-1px);
}

.chrome-button:disabled,
.action-button:disabled,
.mode-tab:disabled,
.sort-fallback:disabled,
.center-hint__button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.chrome-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  font-size: 0.9rem;
}

.chrome-button__icon {
  font-size: 1.05rem;
}

.layout {
  display: grid;
  flex: 1;
  min-height: 0;
  gap: 10px;
  grid-template-rows: minmax(0, 1fr) auto;
}

.mode-panel,
.overlay-panel__sheet,
.dialog__card {
  backdrop-filter: blur(26px);
}

.mode-panel,
.controls {
  border-radius: var(--radius-xl);
}

.mode-panel {
  padding: 12px;
  display: grid;
  gap: 10px;
}

.mode-panel--settings {
  margin-bottom: 12px;
}

.mode-panel__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.mode-panel__title {
  margin: 0;
  font-size: 1rem;
}

.mode-panel__value {
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255, 248, 232, 0.06);
  color: var(--gold-strong);
  font-size: 0.88rem;
  white-space: nowrap;
}

.mode-tabs {
  display: flex;
  gap: 8px;
}

.mode-tab {
  flex: 1;
  padding: 11px 12px;
}

.mode-tab.is-active,
.action-button--primary,
.center-hint__button {
  background:
    linear-gradient(135deg, rgba(255, 227, 166, 0.96), rgba(255, 197, 107, 0.88));
  color: #13231c;
  box-shadow:
    0 18px 30px rgba(255, 194, 88, 0.18),
    inset 0 1px 0 rgba(255, 249, 229, 0.74);
}

.mode-panel__hint {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-muted);
}

.board {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
  padding: 12px 12px 10px;
  align-items: stretch;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-radius: var(--radius-xl);
  background: transparent;
  box-shadow: none;
}

.board::before,
.board::after {
  display: none;
}

.board::before {
  z-index: 0;
  background:
    radial-gradient(
      ellipse at 50% 12%,
      rgba(255, 244, 217, 0.22) 0%,
      rgba(255, 222, 158, 0.12) 20%,
      rgba(255, 222, 158, 0.04) 36%,
      transparent 62%
    ),
    radial-gradient(
      ellipse at 50% 64%,
      rgba(255, 235, 188, 0.08) 0%,
      transparent 44%
    );
}

.board::after {
  z-index: 0;
  opacity: 0.24;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 250, 240, 0.014) 0 1px,
      transparent 1px 14px
    ),
    repeating-linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.03) 0 2px,
      transparent 2px 18px
    );
}

.board-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  overflow: hidden;
}

.board-scene canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.board > .pile--deck {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  z-index: 4;
}

.board > .reveal-zone {
  grid-column: 1 / -1;
  grid-row: 2;
}

.board > .pile,
.board > .reveal-zone {
  position: relative;
  z-index: 2;
}

.pile {
  display: block;
  min-width: 0;
}

.pile-stage,
.reveal-zone {
  position: relative;
  min-height: 0;
  border-radius: 24px;
}

.pile-stage {
  overflow: visible;
  background: transparent;
}

.pile-stage::before {
  display: none;
}

.pile-stage--deck {
  min-height: 184px;
  width: min(54vw, 244px);
  cursor: pointer;
  touch-action: manipulation;
}

.pile-stage.is-shuffling .stack-card {
  animation: stackShuffle 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--shuffle-delay);
}

.reveal-zone {
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 0;
  background: transparent;
}

.reveal-zone__halo {
  display: none;
}

.center-hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px 16px 12px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.82rem;
  line-height: 1.45;
  pointer-events: none;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.center-hint__content {
  display: grid;
  gap: 8px;
  max-width: 15rem;
}

.center-hint__button {
  justify-self: center;
  padding: 0 18px;
  pointer-events: auto;
}

.active-card-host {
  position: relative;
  z-index: 3;
  width: calc(var(--card-width) * 1.12);
  aspect-ratio: var(--card-ratio);
  pointer-events: none;
}

.active-card-host > * {
  pointer-events: auto;
}

.active-card-hit {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.stack-card,
.active-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--card-width);
  aspect-ratio: var(--card-ratio);
  transform-style: preserve-3d;
}

.stack-card {
  pointer-events: none;
  border-radius: 16px;
}

.pile-stage .stack-card {
  top: 58%;
  width: clamp(130px, 38vw, 166px);
}

.pile-stage .stack-card--deck {
  left: 46%;
  width: clamp(138px, 40vw, 176px);
}

.shuffle-card {
  position: absolute;
  left: 50%;
  top: 58%;
  width: clamp(130px, 38vw, 166px);
  aspect-ratio: var(--card-ratio);
  border-radius: 16px;
  pointer-events: none;
  opacity: 0;
  border: 1px solid rgba(246, 215, 164, 0.28);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 224, 170, 0.16) 0 13%, transparent 13% 100%),
    radial-gradient(circle at 50% 50%, rgba(255, 224, 170, 0.1) 0 33%, transparent 33% 100%),
    repeating-linear-gradient(135deg, rgba(255, 226, 170, 0.06) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.12) 0 3px, transparent 3px 24px),
    radial-gradient(circle at 22% 20%, rgba(255, 235, 194, 0.14), transparent 30%),
    linear-gradient(145deg, rgba(105, 33, 38, 0.98), rgba(53, 10, 15, 0.99));
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 170, 0.06),
    inset 0 0 34px rgba(255, 220, 152, 0.06);
}

.pile-stage.is-shuffling .shuffle-card {
  animation: insertToDeck 560ms cubic-bezier(0.2, 0.84, 0.28, 1) both;
  animation-delay: var(--ghost-delay);
}

.shuffle-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 226, 170, 0.16);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 232, 184, 0.08) 0 22%, transparent 22% 100%),
    linear-gradient(135deg, transparent 0 47%, rgba(255, 226, 170, 0.08) 47% 53%, transparent 53% 100%),
    linear-gradient(45deg, transparent 0 47%, rgba(255, 226, 170, 0.08) 47% 53%, transparent 53% 100%);
}

.shuffle-card::after {
  content: "✦\A◇  FATE  ◇\A✦";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  white-space: pre;
  text-align: center;
  color: rgba(255, 226, 170, 0.72);
  font-family: "Baskerville Old Face", "Songti SC", "STSong", serif;
  font-size: 0.92rem;
  line-height: 1.35;
  letter-spacing: 0.16em;
}

.stack-card__inner,
.card-flip {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transform-style: preserve-3d;
}

.stack-card__inner {
  border: 1px solid rgba(246, 215, 164, 0.26);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 225, 170, 0.16) 0 13%, transparent 13% 100%),
    radial-gradient(circle at 50% 50%, rgba(255, 225, 170, 0.08) 0 34%, transparent 34% 100%),
    repeating-linear-gradient(135deg, rgba(255, 226, 170, 0.06) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.12) 0 3px, transparent 3px 24px),
    radial-gradient(circle at 22% 18%, rgba(255, 232, 184, 0.18), transparent 28%),
    linear-gradient(145deg, rgba(108, 34, 40, 0.96), rgba(53, 10, 15, 0.99));
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 170, 0.06),
    inset 0 0 34px rgba(255, 220, 152, 0.06);
}

.stack-card__inner--front {
  display: grid;
  place-items: center;
  padding: 10px;
  border: 1px solid rgba(209, 177, 126, 0.24);
  background:
    radial-gradient(circle at top, rgba(255, 232, 184, 0.2), transparent 34%),
    linear-gradient(180deg, rgba(255, 245, 221, 0.98), rgba(245, 223, 179, 0.9));
  color: #183029;
}

.stack-card__inner::before,
.card-face::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 226, 170, 0.15);
}

.stack-card__inner::before {
  background:
    radial-gradient(circle at center, rgba(255, 232, 184, 0.08) 0 19%, transparent 19% 100%),
    linear-gradient(135deg, transparent 0 47%, rgba(255, 226, 170, 0.08) 47% 53%, transparent 53% 100%),
    linear-gradient(45deg, transparent 0 47%, rgba(255, 226, 170, 0.08) 47% 53%, transparent 53% 100%);
}

.pile-stage .stack-card__inner::before {
  inset: 8px;
  border-radius: 9px;
}

.stack-card__inner::after {
  content: "✦\A◇  FATE  ◇\A✦";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  white-space: pre;
  text-align: center;
  font-family: "Baskerville Old Face", "Songti SC", "STSong", serif;
  font-size: 1rem;
  line-height: 1.45;
  color: rgba(255, 230, 175, 0.74);
  letter-spacing: 0.16em;
}

.stack-card__inner--front::after {
  display: none;
}

.stack-card__inner--front::before {
  background: none;
}

.stack-card__title {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  color: rgba(24, 48, 41, 0.8);
  font-family: "Baskerville Old Face", "Songti SC", "STSong", serif;
  font-size: 0.74rem;
  line-height: 1.15;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.stack-card__badge {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: flex;
  justify-content: space-between;
  font-size: 0.74rem;
  color: rgba(255, 237, 199, 0.72);
}

.pile-stage .stack-card__badge {
  left: 8px;
  right: 8px;
  bottom: 8px;
  font-size: 0.5rem;
}

.active-card {
  transform: translate(-50%, -50%) scale(1);
  perspective: 1400px;
  transform-origin: center center;
}

.active-card.phase-entering {
  animation: drawIn 560ms cubic-bezier(0.2, 0.88, 0.32, 1.08) both;
}

.active-card.phase-flipping {
  animation: revealPulse 260ms ease-out both;
}

.active-card.phase-flipping .card-flip,
.active-card.phase-revealed .card-flip,
.active-card.phase-leaving .card-flip {
  transform: rotateY(180deg);
}

.active-card.phase-flipping .card-flip {
  animation: cardFlip 520ms cubic-bezier(0.2, 0.88, 0.32, 1.02) both;
}

.active-card.phase-revealed {
  transform: translate(-50%, -50%) scale(1.08);
}

.active-card.phase-leaving {
  animation: drawOut 500ms cubic-bezier(0.18, 0.82, 0.32, 1) forwards;
}

.card-flip {
  transform: rotateY(0deg);
}

.card-face {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  backface-visibility: hidden;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 230, 175, 0.08);
}

.card-face--back {
  border: 1px solid rgba(246, 215, 164, 0.28);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 225, 170, 0.16) 0 12%, transparent 12% 100%),
    radial-gradient(circle at 50% 50%, rgba(255, 225, 170, 0.1) 0 34%, transparent 34% 100%),
    repeating-linear-gradient(135deg, rgba(255, 226, 170, 0.06) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.12) 0 3px, transparent 3px 24px),
    radial-gradient(circle at 22% 18%, rgba(255, 232, 184, 0.18), transparent 28%),
    linear-gradient(145deg, rgba(110, 36, 42, 0.98), rgba(53, 10, 15, 0.99));
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 170, 0.06),
    inset 0 0 38px rgba(255, 220, 152, 0.08);
}

.card-face--back::before {
  inset: 10px;
  border-radius: 10px;
  background:
    radial-gradient(circle at center, rgba(255, 232, 184, 0.08) 0 20%, transparent 20% 100%),
    linear-gradient(135deg, transparent 0 47%, rgba(255, 226, 170, 0.08) 47% 53%, transparent 53% 100%),
    linear-gradient(45deg, transparent 0 47%, rgba(255, 226, 170, 0.08) 47% 53%, transparent 53% 100%);
}

.card-face--back::after {
  content: "✦\A◇  FATE  ◇\A✦";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Baskerville Old Face", "Songti SC", "STSong", serif;
  white-space: pre;
  text-align: center;
  line-height: 1.34;
  letter-spacing: 0.14em;
  color: rgba(255, 230, 175, 0.62);
  font-size: clamp(0.96rem, 4vw, 1.45rem);
}

.card-face--front {
  transform: rotateY(180deg);
  display: flex;
  width: 100%;
  border: 1px solid rgba(255, 226, 170, 0.34);
  background:
    radial-gradient(circle at top, rgba(255, 232, 184, 0.26), transparent 34%),
    linear-gradient(180deg, rgba(255, 245, 221, 0.98), rgba(250, 228, 178, 0.86)),
    linear-gradient(145deg, rgba(27, 58, 48, 0.96), rgba(14, 29, 25, 0.96));
  color: #183029;
  text-align: left;
}

.card-face--front:focus-visible {
  outline: 2px solid rgba(18, 38, 31, 0.88);
  outline-offset: -6px;
}

.card-face__content {
  position: relative;
  display: grid;
  align-content: center;
  width: 100%;
  padding: 18px 16px;
  gap: 10px;
}

.card-face__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(19, 40, 33, 0.12);
  color: rgba(19, 40, 33, 0.75);
  letter-spacing: 0.16em;
  font-size: 0.72rem;
}

.card-face__title {
  margin: 0;
  font-family: "Baskerville Old Face", "Songti SC", "STSong", serif;
  font-size: clamp(1.45rem, 5vw, 2rem);
  line-height: 1.02;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.card-face__description {
  margin: 0;
  line-height: 1.5;
  font-size: 0.88rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: rgba(24, 48, 41, 0.8);
}

.card-face__hint {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: rgba(24, 48, 41, 0.65);
}

.controls {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 0 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.action-button {
  padding: 0 10px;
  font-size: 0.92rem;
  min-width: min(42vw, 144px);
}

.action-button--ghost {
  background: rgba(255, 248, 232, 0.04);
}

.action-button--small {
  min-height: 44px;
  padding: 0 16px;
  flex: none;
}

.overlay-panel {
  position: fixed;
  inset: 0;
  z-index: 40;
}

.overlay-panel[hidden],
.dialog[hidden],
.toast[hidden] {
  display: none;
}

.overlay-panel__scrim,
.dialog__scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 10, 8, 0.6);
}

.overlay-panel__sheet,
.dialog__card {
  position: relative;
  background: var(--panel-strong);
  border: 1px solid rgba(255, 226, 170, 0.16);
  box-shadow: var(--shadow);
}

.overlay-panel__sheet {
  height: 100%;
  padding:
    max(14px, env(safe-area-inset-top))
    14px
    calc(18px + env(safe-area-inset-bottom));
  overflow: auto;
}

.overlay-panel__sheet--history {
  background:
    linear-gradient(180deg, rgba(16, 24, 22, 0.96), rgba(8, 14, 12, 0.98)),
    var(--panel-strong);
}

.overlay-panel__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.close-button {
  width: 44px;
  border-radius: 50%;
  background: rgba(255, 248, 232, 0.08);
  color: var(--ink);
}

.settings-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: var(--radius-lg);
  background: rgba(255, 248, 232, 0.04);
  border: 1px solid rgba(255, 226, 170, 0.08);
}

.settings-toolbar__copy {
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.6;
}

.settings-list,
.history-list {
  display: grid;
  gap: 10px;
}

.settings-card,
.history-card,
.history-empty,
.settings-empty {
  border-radius: var(--radius-lg);
  background: rgba(255, 248, 232, 0.05);
  border: 1px solid rgba(255, 226, 170, 0.08);
}

.settings-card {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.settings-card--ghost {
  opacity: 0.4;
}

.settings-card--chosen {
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22);
}

.settings-card__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}

.settings-card__index {
  margin: 0 0 4px;
  color: rgba(255, 226, 170, 0.62);
  letter-spacing: 0.18em;
  font-size: 0.78rem;
}

.settings-card__title {
  margin: 0;
}

.settings-card__handle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255, 226, 170, 0.12);
  background: rgba(255, 248, 232, 0.04);
  color: var(--ink);
  font-size: 1.2rem;
  cursor: grab;
  touch-action: none;
}

.settings-card__handle:active {
  cursor: grabbing;
}

.settings-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sort-fallback {
  min-width: 44px;
  padding: 0 14px;
}

.sort-fallback--danger {
  background: rgba(242, 135, 114, 0.12);
  color: #ffd2c7;
  box-shadow: inset 0 0 0 1px rgba(242, 135, 114, 0.18);
}

.sort-fallback:disabled {
  opacity: 0.24;
}

.settings-card__grid {
  display: grid;
  gap: 12px;
}

.field {
  display: grid;
  gap: 8px;
}

.field span {
  color: var(--ink-muted);
  font-size: 0.92rem;
}

.field input,
.field textarea {
  width: 100%;
  border: 1px solid rgba(255, 226, 170, 0.14);
  border-radius: 16px;
  background: rgba(255, 248, 232, 0.05);
  color: var(--ink);
  padding: 14px 16px;
}

.field input:focus,
.field textarea:focus {
  outline: 2px solid rgba(255, 226, 170, 0.18);
  border-color: rgba(255, 226, 170, 0.32);
}

.field textarea {
  min-height: 110px;
  resize: vertical;
}

.settings-empty,
.history-empty {
  padding: 22px;
  color: var(--ink-muted);
  text-align: center;
  line-height: 1.7;
}

.history-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 16px;
}

.history-card__order {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  font-family: "Baskerville Old Face", "Songti SC", "STSong", serif;
  font-size: 1.35rem;
  color: #13231c;
  background:
    linear-gradient(135deg, rgba(255, 227, 166, 0.96), rgba(255, 197, 107, 0.88));
}

.history-card__title {
  margin: 0 0 8px;
  font-size: 1.1rem;
}

.history-card__description {
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

.dialog {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 18px;
}

.dialog__card {
  z-index: 1;
  width: min(100%, 420px);
  padding: 28px 24px;
  border-radius: 28px;
  text-align: center;
}

.dialog__card p {
  color: var(--ink-muted);
  line-height: 1.6;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 80;
  translate: -50% 0;
  min-width: min(90vw, 300px);
  max-width: 90vw;
  padding: 14px 18px;
  border-radius: 999px;
  background: rgba(14, 22, 20, 0.92);
  color: var(--ink);
  box-shadow: var(--shadow);
  text-align: center;
}

@keyframes drawIn {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(var(--draw-from-x), var(--draw-from-y)) rotate(-12deg) scale(0.44);
  }
  72% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(1);
  }
}

@keyframes drawOut {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(1.08);
  }
  100% {
    opacity: 0.92;
    transform: translate(-50%, -50%) translate(var(--draw-to-x), var(--draw-to-y)) rotate(10deg) scale(0.46);
  }
}

@keyframes cardFlip {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}

@keyframes revealPulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@keyframes stackShuffle {
  0%,
  100% {
    transform: translate(-50%, -50%) translate(var(--stack-x), var(--stack-y)) rotate(var(--stack-r));
  }
  35% {
    transform: translate(-50%, -50%) translate(calc(var(--stack-x) + var(--shuffle-x)), calc(var(--stack-y) + var(--shuffle-y))) rotate(calc(var(--stack-r) + var(--shuffle-r)));
  }
  72% {
    transform: translate(-50%, -50%) translate(calc(var(--stack-x) - 8px), calc(var(--stack-y) + 4px)) rotate(calc(var(--stack-r) - 5deg));
  }
}

@keyframes insertToDeck {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--ghost-start-x), var(--ghost-start-y)) rotate(var(--ghost-rot)) scale(0.96);
  }
  14% {
    opacity: 1;
  }
  60% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(8px, -3px) rotate(2deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(0.98);
  }
}

@media (max-height: 760px) {
  .brand h1 {
    font-size: 1.5rem;
  }

  .layout {
    gap: 8px;
  }

  .board {
    gap: 4px;
    padding: 10px;
  }

  .pile-stage--deck {
    min-height: 162px;
  }

  .pile-stage .stack-card,
  .shuffle-card {
    width: clamp(118px, 34vw, 144px);
  }

  .pile-stage .stack-card--deck {
    width: clamp(124px, 36vw, 152px);
  }

  .stack-card,
  .active-card {
    width: clamp(166px, 52vw, 206px);
  }

  .active-card-host {
    width: calc(clamp(166px, 52vw, 206px) * 1.12);
  }

  .card-face__content {
    padding: 16px 14px;
    gap: 8px;
  }

  .card-face__description {
    -webkit-line-clamp: 2;
    font-size: 0.84rem;
  }

  .center-hint {
    padding: 12px;
    font-size: 0.8rem;
  }
}

@media (max-width: 360px) {
  .settings-toolbar,
  .settings-card__head {
    grid-template-columns: 1fr;
  }

  .settings-toolbar {
    display: grid;
  }

  .settings-card__actions {
    justify-content: flex-start;
  }

  .controls {
    justify-content: stretch;
  }

  .controls .action-button {
    min-width: 0;
    flex: 1 1 0;
  }
}