.card-image-wrapper.reversed img {
  transform: rotate(180deg);
}
:root {
  --background: #0d0912;
  --background-light: #17111f;
  --panel: #1d1727;
  --panel-light: #251d31;

  --text: #f5effa;
  --muted: #bcb0c8;

  --purple: #c5a4ff;
  --purple-dark: #9d72eb;

  --gold: #e4cf96;

  --border: rgba(255, 255, 255, 0.12);
  --border-light: rgba(255, 255, 255, 0.2);

  --danger: #efaaaa;
  --success: #bce3c1;

  --radius: 20px;
  --small-radius: 11px;

  --shadow:
    0 25px 60px
    rgba(0, 0, 0, 0.35);
}


/* =========================
   RESET
========================= */

* {
  box-sizing: border-box;
}


html {
  min-height: 100%;
}


body {
  min-height: 100vh;

  margin: 0;

  color: var(--text);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  line-height: 1.5;

  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(117, 76, 175, 0.17),
      transparent 35%
    ),
    radial-gradient(
      circle at 90% 30%,
      rgba(69, 99, 137, 0.13),
      transparent 35%
    ),
    linear-gradient(
      180deg,
      #16101e,
      #0d0912 70%
    );
}


button,
select,
input {
  font: inherit;
}


button {
  cursor: pointer;
}


button:disabled,
select:disabled,
input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}


img {
  display: block;
  max-width: 100%;
}


h1,
h2,
h3 {
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-weight: 500;
}


h1,
h2,
h3,
p {
  margin-top: 0;
}


.container {
  width: min(
    calc(100% - 32px),
    1250px
  );

  margin-left: auto;
  margin-right: auto;
}


/* =========================
   HEADER
========================= */

.site-header {
  position: sticky;
  top: 0;

  z-index: 20;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.08);

  background:
    rgba(12, 8, 17, 0.82);

  backdrop-filter: blur(16px);
}


.header-inner {
  min-height: 80px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;
}


.brand {
  display: flex;

  align-items: center;

  gap: 14px;
}


.brand-icon {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border:
    1px solid
    rgba(228, 207, 150, 0.35);

  border-radius: 50%;

  color: var(--gold);

  background:
    rgba(228, 207, 150, 0.08);
}


h1 {
  margin-bottom: 0;

  font-size:
    clamp(
      1.35rem,
      3vw,
      2rem
    );
}


.eyebrow {
  margin-bottom: 4px;

  color: var(--gold);

  font-size: 0.72rem;

  font-weight: bold;

  letter-spacing: 0.13em;

  text-transform: uppercase;
}


/* =========================
   PAGE
========================= */

.page-content {
  padding-top: 38px;
  padding-bottom: 70px;
}


.panel {
  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius);

  background:
    linear-gradient(
      145deg,
      rgba(34, 27, 46, 0.95),
      rgba(20, 16, 28, 0.95)
    );

  box-shadow:
    var(--shadow);
}


.setup-panel {
  padding:
    clamp(
      22px,
      4vw,
      40px
    );
}


.section-header {
  max-width: 720px;

  margin-bottom: 30px;
}


.section-header h2 {
  margin-bottom: 8px;

  font-size:
    clamp(
      1.7rem,
      4vw,
      2.5rem
    );
}


.section-header p {
  margin-bottom: 0;

  color: var(--muted);
}


/* =========================
   SETUP
========================= */

.setup-grid {
  display: grid;

  grid-template-columns:
    minmax(220px, 300px)
    minmax(0, 1fr);

  gap:
    clamp(
      28px,
      5vw,
      58px
    );

  align-items: start;
}


.deck-preview {
  width: min(
    100%,
    280px
  );

  aspect-ratio: 2 / 3.5;

  margin-left: auto;
  margin-right: auto;

  overflow: hidden;

  border:
    1px solid
    var(--border-light);

  border-radius: 17px;

  background: #110d17;

  box-shadow:
    0 18px 40px
    rgba(0, 0, 0, 0.3);
}


.deck-preview img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


.deck-placeholder {
  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;

  color: var(--gold);

  font-size: 3rem;

  background:
    radial-gradient(
      circle,
      rgba(228, 207, 150, 0.1),
      transparent 40%
    );
}


/* =========================
   FORMS
========================= */

.field-group {
  margin-bottom: 22px;
}


.field-group label,
.field-label {
  display: block;

  margin-bottom: 8px;

  color: #eee6f5;

  font-size: 0.92rem;

  font-weight: bold;
}


select,
input[type="number"] {
  width: 100%;

  min-height: 48px;

  padding-left: 13px;
  padding-right: 13px;

  border:
    1px solid
    var(--border-light);

  border-radius:
    var(--small-radius);

  outline: 0;

  color: var(--text);

  background:
    rgba(12, 9, 17, 0.9);
}


select:focus,
input:focus {
  border-color:
    var(--purple);

  box-shadow:
    0 0 0 4px
    rgba(197, 164, 255, 0.12);
}


.deck-select-row {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: 11px;
}


.button {
  min-height: 46px;

  padding:
    0 17px;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--small-radius);

  color: var(--text);

  font-weight: bold;

  background:
    rgba(255, 255, 255, 0.04);

  transition:
    transform 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}


.button:hover:not(:disabled) {
  transform:
    translateY(-1px);
}


.button-primary {
  border-color:
    rgba(197, 164, 255, 0.35);

  color: #130e1a;

  background:
    linear-gradient(
      135deg,
      #d0b3ff,
      #b387f8
    );
}


.button-secondary {
  background:
    rgba(255, 255, 255, 0.04);
}


.button-random {
  white-space: nowrap;

  border-color:
    rgba(228, 207, 150, 0.3);

  color: #f2e7c9;

  background:
    rgba(228, 207, 150, 0.08);
}


/* =========================
   DECK INFORMATION
========================= */

.deck-information {
  margin-top: -3px;
  margin-bottom: 24px;

  padding: 18px;

  border:
    1px solid
    var(--border);

  border-radius: 16px;

  background:
    rgba(255, 255, 255, 0.035);
}


.deck-information h3 {
  margin-bottom: 4px;

  font-size: 1.35rem;
}


.deck-creators {
  margin-bottom: 10px;

  color: var(--gold);

  font-size: 0.86rem;
}


.deck-description {
  margin-bottom: 10px;

  color: var(--muted);
}


.deck-count {
  color: #d8cfe0;

  font-size: 0.83rem;
}


/* =========================
   COVERS
========================= */

.cover-picker {
  margin-top: 18px;
}


.cover-options {
  display: flex;

  flex-wrap: wrap;

  gap: 9px;
}


.cover-option {
  width: 55px;

  aspect-ratio: 2 / 3.5;

  padding: 0;

  overflow: hidden;

  border:
    2px solid
    transparent;

  border-radius: 7px;

  background: #111;
}


.cover-option img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


.cover-option.active {
  border-color:
    var(--gold);
}


/* =========================
   READING OPTIONS
========================= */

.reading-options-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(170px, 0.38fr);

  gap: 15px;
}


.field-help {
  margin-top: 7px;
  margin-bottom: 0;

  color: var(--muted);

  font-size: 0.8rem;
}


.number-control {
  display: grid;

  grid-template-columns:
    45px
    minmax(55px, 1fr)
    45px;
}


.number-control button {
  border:
    1px solid
    var(--border-light);

  color: var(--text);

  background:
    rgba(12, 9, 17, 0.9);

  font-size: 1.3rem;
}


.number-control button:first-child {
  border-radius:
    11px 0 0 11px;
}


.number-control button:last-child {
  border-radius:
    0 11px 11px 0;
}


.number-control input {
  border-left: 0;
  border-right: 0;

  border-radius: 0;

  text-align: center;
}


/* =========================
   REVERSAL TOGGLE
========================= */

.reversal-option {
  display: inline-flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 24px;

  cursor: pointer;
}


.reversal-option input {
  position: absolute;

  opacity: 0;

  pointer-events: none;
}


.toggle-track {
  position: relative;

  width: 48px;
  height: 27px;

  flex-shrink: 0;

  border:
    1px solid
    var(--border-light);

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.08);
}


.toggle-knob {
  position: absolute;

  top: 3px;
  left: 3px;

  width: 19px;
  height: 19px;

  border-radius: 50%;

  background: #d7cede;

  transition:
    transform 0.18s ease;
}


.reversal-option input:checked + .toggle-track {
  background: rgba(157, 114, 235, 0.5);
}


.reversal-option input:checked + .toggle-track .toggle-knob {
  transform: translateX(21px);
}


.reversal-option strong,
.reversal-option small {
  display: block;
}


.reversal-option small {
  margin-top: 2px;

  color: var(--muted);

  font-size: 0.75rem;
}


.reversal-option.disabled {
  opacity: 0.48;

  cursor: not-allowed;
}


/* =========================
   BUTTON GROUPS
========================= */

.main-actions,
.reading-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;
}


.status-message {
  min-height: 1.3em;

  margin-top: 13px;

  color: var(--muted);

  font-size: 0.85rem;
}


.status-message.success {
  color: var(--success);
}


.status-message.error {
  color: var(--danger);
}


/* =========================
   READING
========================= */

.reading-section {
  margin-top: 42px;
}


.reading-header {
  display: flex;

  justify-content: space-between;
  align-items: flex-end;

  gap: 20px;

  margin-bottom: 22px;
}


.reading-header h2 {
  margin-bottom: 4px;
}


.reading-header p {
  margin-bottom: 0;

  color: var(--muted);
}


.cards-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        min(100%, 255px),
        1fr
      )
    );

  gap: 21px;

  align-items: start;
}


.reading-card {
  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius: 19px;

  background:
    linear-gradient(
      150deg,
      #211a2b,
      #15101d
    );

  box-shadow:
    0 17px 40px
    rgba(0, 0, 0, 0.27);
}


.position-information {
  min-height: 84px;

  padding:
    16px 18px;

  border-bottom:
    1px solid
    var(--border);
}


.position-information h3 {
  margin-bottom: 4px;

  font-size: 1.13rem;
}


.position-information p {
  margin-bottom: 0;

  color: var(--muted);

  font-size: 0.8rem;
}


/* =========================
   FLIPPING CARD
========================= */

.card-flip {
  position: relative;

  width:
    calc(100% - 36px);

  max-width: 280px;

  aspect-ratio: 2 / 3.5;

  margin:
    20px auto 0;

  perspective: 1200px;

  cursor: pointer;
}


.card-flip-inner {
  position: absolute;

  inset: 0;

  transform-style:
    preserve-3d;

  transition:
    transform
    0.55s ease;
}


.reading-card.revealed
.card-flip-inner {
  transform:
    rotateY(180deg);
}


.card-face {
  position: absolute;

  inset: 0;

  overflow: hidden;

  border:
    1px solid
    var(--border-light);

  border-radius: 15px;

  background: #100d15;

  backface-visibility:
    hidden;
}


.card-face img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


.card-front {
  transform:
    rotateY(180deg);
}


.card-front.reversed img {
  transform:
    rotate(180deg);
}


.card-fallback {
  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;

  color: var(--gold);

  font-size: 2rem;

  background:
    radial-gradient(
      circle,
      rgba(228, 207, 150, 0.12),
      transparent 30%
    ),
    #17111f;
}


/* =========================
   CARD SUMMARY
========================= */

.card-summary {
  padding:
    19px 20px 22px;
}


.card-summary.hidden {
  visibility: hidden;
}


.reading-card.revealed
.card-summary.hidden {
  visibility: visible;
}


.card-summary h3 {
  margin-bottom: 4px;

  font-size: 1.4rem;
}


.orientation {
  margin-bottom: 11px;

  color: var(--gold);

  font-size: 0.73rem;

  font-weight: bold;

  letter-spacing: 0.09em;

  text-transform: uppercase;
}


.keywords {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-bottom: 13px;
}


.keyword {
  padding:
    4px 9px;

  border:
    1px solid
    rgba(197, 164, 255, 0.18);

  border-radius: 999px;

  color: #ded3eb;

  background:
    rgba(197, 164, 255, 0.08);

  font-size: 0.74rem;
}


.card-meaning {
  margin-bottom: 0;

  color: #d8cedf;

  font-size: 0.9rem;
}


.full-card-button {
  width: 100%;

  margin-top: 16px;
}


/* =========================
   EMPTY READING
========================= */

.empty-reading {
  margin-top: 42px;

  padding:
    46px 20px;

  text-align: center;
}


.empty-reading h2 {
  margin-bottom: 8px;
}


.empty-reading p {
  max-width: 560px;

  margin:
    0 auto;

  color: var(--muted);
}


.empty-icon {
  margin-bottom: 8px;

  color: var(--gold);

  font-size: 2.2rem;
}


/* =========================
   DIALOG
========================= */

dialog {
  width:
    min(
      calc(100% - 30px),
      820px
    );

  max-height: 88vh;

  padding: 0;

  overflow: auto;

  border:
    1px solid
    var(--border-light);

  border-radius: 21px;

  color: var(--text);

  background: #17111f;

  box-shadow:
    0 35px 100px
    rgba(0, 0, 0, 0.65);
}


dialog::backdrop {
  background:
    rgba(4, 2, 7, 0.78);

  backdrop-filter:
    blur(4px);
}


.dialog-close {
  position: sticky;

  top: 12px;

  z-index: 4;

  float: right;

  width: 42px;
  height: 42px;

  margin:
    12px 12px -54px 0;

  border:
    1px solid
    var(--border);

  border-radius: 50%;

  color: white;

  background:
    rgba(12, 9, 17, 0.88);

  font-size: 1.4rem;
}


.dialog-layout {
  display: grid;

  grid-template-columns:
    minmax(190px, 280px)
    minmax(0, 1fr);

  gap: 27px;

  padding: 28px;
}


.dialog-image {
  overflow: hidden;

  aspect-ratio: 2 / 3.5;

  border:
    1px solid
    var(--border-light);

  border-radius: 15px;

  background: #0e0a13;
}


.dialog-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


.dialog-image.reversed img {
  transform:
    rotate(180deg);
}


.dialog-copy {
  min-width: 0;

  padding-top: 8px;
}


.dialog-copy h2 {
  margin-bottom: 3px;
}


.detail-section {
  margin-top: 17px;
  padding-top: 17px;

  border-top:
    1px solid
    var(--border);
}


.detail-section h3 {
  margin-bottom: 8px;

  font-size: 1.04rem;
}


.detail-section p:last-child,
.detail-section ul:last-child {
  margin-bottom: 0;
}


.detail-section ul {
  padding-left: 20px;

  color: #d7cedf;
}


.detail-section li + li {
  margin-top: 7px;
}


.definition-list {
  display: grid;

  grid-template-columns:
    auto 1fr;

  gap:
    7px 13px;

  margin: 0;
}


.definition-list dt {
  color: var(--gold);

  font-weight: bold;
}


.definition-list dd {
  margin: 0;

  color: #d7cedf;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 800px) {

  .setup-grid {
    grid-template-columns: 1fr;
  }


  .deck-preview {
    width:
      min(
        65vw,
        270px
      );
  }


  .reading-options-grid {
    grid-template-columns: 1fr;
  }


  .reading-header {
    flex-direction: column;

    align-items: flex-start;
  }


  .dialog-layout {
    grid-template-columns: 1fr;
  }


  .dialog-image {
    width:
      min(
        70vw,
        280px
      );

    margin-left: auto;
    margin-right: auto;
  }

}


@media (max-width: 550px) {

  .container {
    width:
      calc(100% - 20px);
  }


  .site-header {
    position: static;
  }


  .header-inner {
    min-height: 70px;
  }


  .desktop-reshuffle {
    display: none;
  }


  .page-content {
    padding-top: 20px;
  }


  .setup-panel {
    padding:
      20px 15px 24px;
  }


  .deck-select-row {
    grid-template-columns: 1fr;
  }


  .button-random {
    width: 100%;
  }


  .main-actions,
  .reading-actions {
    display: grid;

    grid-template-columns: 1fr;

    width: 100%;
  }


  .main-actions button,
  .reading-actions button {
    width: 100%;
  }


  .cards-grid {
    grid-template-columns: 1fr;
  }


  .card-flip {
    width:
      min(
        calc(100% - 36px),
        280px
      );
  }


  dialog {
    width:
      calc(100% - 16px);

    max-height: 92vh;
  }


  .dialog-layout {
    padding:
      20px 15px 24px;
  }

}