/* =========================================================
   OneCardTarot – Relations 5 Cards (PRO CSS)
   - Stable deck + 5-slot picked row
   - Mobile: full-width spread (no cramped row)
   - iOS: tap-to-zoom via .ui-open (hover substitute)
   - 1st/5th card: subtle 3D tilt inward
   - Table3/Table4: fixed layout + better UX, no drifting columns
   ========================================================= */

/* -------------------------
   Base / reset
------------------------- */

:root{
  color-scheme: dark;

  /* Sizing */
  --card-w: clamp(120px, 9.0vw, 190px);
  --card-h: calc(var(--card-w) * 1.72);
  --card-radius: 0px;

  /* Picked row */
  --picked-scale: 0.92;
  --picked-gap: clamp(18px, 3.6vw, 96px);
  --picked-pad: clamp(10px, 3vw, 52px);

  /* Stage layout */
  --stage-h: clamp(520px, 40vw, 760px);
  --picked-top: clamp(70px, 9.5vw, 150px);
  --deck-bottom: clamp(22px, 3.2vw, 56px);

  /* Motion */
  --t-flip: 1.6s;
  --t-fly: 1.15s;
  --e-flip: cubic-bezier(.2,.8,.2,1);
  --e-fly: cubic-bezier(.18,.88,.22,1);
  --deck-hover-lift: 18px;

  /* Zoom/tilt */
  --hover-mul: 1.85;   /* desktop hover */
  --open-mul: 1.95;    /* mobile tap (.ui-open) */
  --tilt-persp: 1100px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --tilt-z: 0deg;
  --pop-x: 0px;        /* optional: shift while zoomed */
  --pop-y: 0px;

  /* Visual */
  --accent1: #ff2d55;
  --accent2: #a855f7;

  --glow: 0 18px 60px rgba(160, 60, 255, .18);
  --shadow-1: 0 12px 30px rgba(0,0,0,.38);
  --shadow-2: 0 16px 48px rgba(0,0,0,.55);

  /* After spread */
  --deck-dim: .44;      /* was too strong */
  --slot-filled: .36;   /* was too faded */
}

@media (max-width: 600px){
  :root{
    /* slightly larger + better fit for 5 cards */
    --card-w: clamp(78px, 19.6vw, 118px);
    --picked-scale: 0.88;

    /* mobile row will use space-between; gap can be smaller */
    --picked-gap: clamp(6px, 2.2vw, 14px);
    --picked-pad: 12px;

    /* tighter vertical composition */
    --stage-h: clamp(560px, 118vw, 820px);
    --picked-top: clamp(58px, 13vw, 120px);
    --deck-bottom: clamp(76px, 18vw, 112px);

    --deck-hover-lift: 14px;

    /* make tap zoom more satisfying on phones */
    --open-mul: 2.10;
  }
}

@media (prefers-reduced-motion: reduce){
  :root{
    --t-flip: .001s;
    --t-fly: .001s;
  }
}

html, body{
  margin: 0;
  padding: 0;
  background: #000;
}

*{ box-sizing: border-box; }
a{ color: inherit; }

/* -------------------------
   Stage
------------------------- */

.tarot-cards{
  position: relative;
  width: 100%;
  max-width: 1600px;        /* keeps desktop nice, still “full” */
  margin: 0 auto;
  height: var(--stage-h);
  isolation: isolate;
  overflow: visible;
  perspective: var(--tilt-persp); /* enables real 3D tilt on cards */
}

/* Subtle band behind picked cards */
.tarot-cards::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--picked-top) - 52px);
  height: calc(var(--card-h) * var(--picked-scale) + 110px);
  background:
    radial-gradient(1200px 220px at 50% 45%, rgba(160, 60, 255, .22), transparent 62%),
    linear-gradient(to bottom, rgba(0,0,0,.36), rgba(0,0,0,.18));
  border-radius: 22px;
  z-index: 0;
  pointer-events: none;
}

/* -------------------------
   Picked row slots
------------------------- */

.tarot-picked-row{
  position: absolute;
  left: 0;
  right: 0;
  top: var(--picked-top);
  display: flex;
  justify-content: center;
  gap: var(--picked-gap);
  padding: 0 var(--picked-pad);
  z-index: 2;
  pointer-events: none;
}

/* Mobile: spread the 5 slots across the width (no cramped center group) */
@media (max-width: 600px){
  .tarot-picked-row{
    justify-content: space-between;
    gap: 0; /* space-between does the job */
  }
}

.tarot-slot{
  width: calc(var(--card-w) * var(--picked-scale));
  height: calc(var(--card-h) * var(--picked-scale));
  border-radius: var(--card-radius);
  border: 1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.06)),
    radial-gradient(240px 160px at 50% 20%, rgba(160, 60, 255, .18), transparent 62%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22);
  position: relative;
  opacity: .72;
}

.tarot-slot::after{
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: var(--card-radius);
  background-image: url('https://kartytarota.pl/wp-content/uploads/2024/08/tlotarot.webp');
  background-size: cover;
  background-position: center;
  opacity: .28;
  filter: saturate(1.05) contrast(1.05);
}

.tarot-slot.is-filled{ opacity: var(--slot-filled); }

/* -------------------------
   Deck wrapper
------------------------- */

.tarot-deck{
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--deck-bottom);
  height: var(--card-h);
  z-index: 1;
}

.tarot-deck.is-locked{
  filter: saturate(.97) brightness(.95);
}

/* -------------------------
   Card base
------------------------- */

.tarot-card{
  position: absolute;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: var(--card-radius);
  left: 50%;
  top: 0;

  transform:
    translate3d(
      calc(-50% + var(--deck-x, 0px)),
      var(--deck-lift, 0px),
      0
    )
    rotate(var(--deck-rot, 0deg));

  transform-origin: 50% 50%;
  cursor: pointer;
  will-change: transform;
  z-index: var(--z, 1);

  /* smoother + less iOS jitter than filter:drop-shadow */
  box-shadow: var(--shadow-1);

  transition:
    transform 480ms var(--e-fly),
    box-shadow 260ms ease,
    opacity 260ms ease;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Raise stacking when interacting */
.tarot-card:hover{ z-index: 9999; }
.tarot-card.ui-open{ z-index: 9999; }

/* Deck hover (desktop only) */
@media (hover:hover) and (pointer:fine){
  .tarot-card:not(.flipped):not(.moving):hover{
    transform:
      translate3d(
        calc(-50% + var(--deck-x, 0px)),
        calc(var(--deck-lift, 0px) - var(--deck-hover-lift)),
        0
      )
      rotate(0deg)
      scale(1.04);
    box-shadow: var(--shadow-2);
  }
}

/* -------------------------
   Flip / faces
------------------------- */

.tarot-card-inner{
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform var(--t-flip) var(--e-flip);
}

.tarot-card.flipped .tarot-card-inner{
  transform: rotateY(180deg);
}

.tarot-card-front,
.tarot-card-back{
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--card-radius);
  overflow: hidden;
}

/* Face-down */
.tarot-card-front{
  background-color: rgba(10,10,14,.92);
  background-image:
    radial-gradient(520px 360px at 50% 72%, rgba(160,60,255,.18), transparent 65%),
    url('https://kartytarota.pl/wp-content/uploads/2024/08/tlotarot.webp');
  background-position: center;
  background-size: cover;
  border: 1px solid rgba(255,255,255,.14);
}

.tarot-card-front::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('https://onecardtarot.com/wp-content/uploads/2025/01/kartaramka6.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}

.tarot-card-front::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(220px 220px at 50% 35%, rgba(255,255,255,.10), transparent 60%);
  opacity: .75;
}

/* Face-up */
.tarot-card-back{
  transform: rotateY(180deg);
  background: rgba(0,0,0,.32);
  overflow: visible;
}

.cardBackImageContainer{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--card-radius);
  filter: contrast(1.02) saturate(1.02);
}

/* Rotate ONLY the art if reversed */
.cardBackImageContainer[data-reversed="true"]{
  transform: rotate(180deg);
}

/* Vignette for readability */
.tarot-card-back::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.0) 54%),
    radial-gradient(320px 220px at 50% 38%, rgba(0,0,0,.18), transparent 64%);
  pointer-events: none;
}

/* -------------------------
   Overlay UI (title + View)
   - Desktop: show on hover/focus
   - Mobile: show on tap (.ui-open)
------------------------- */

.tarot-card-name{
  position: absolute;
  top: -34px;
  left: 8px;
  right: 8px;

  padding: 7px 10px;
  margin: 0;
  text-align: center;

  font-family: 'Exo 2', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(12px, 1.05vw, 16px);
  letter-spacing: .2px;

  color: #fff;
  background: rgba(0,0,0,.54);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  backdrop-filter: blur(10px);

  opacity: 0;
  transform: translateY(14px) rotateX(12deg) scale(.99);
  transform-origin: 50% 100%;
  transition: opacity 220ms ease, transform 260ms cubic-bezier(.18,.88,.22,1);
  pointer-events: none;
  z-index: 6;
}

.view-card-btn{
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 0;
  border-radius: 0 0 14px 14px;

  font-family: 'Exo 2', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: .35px;

  text-decoration: none;
  color: #fff;
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
  box-shadow: 0 10px 28px rgba(168, 85, 247, .22);

  opacity: 0;
  transform: translateY(18px);
  transition: opacity 220ms ease, transform 260ms cubic-bezier(.18,.88,.22,1), filter 220ms ease;
  pointer-events: none;
  z-index: 6;
}

/* Show overlays */
.tarot-card:focus-within .tarot-card-name,
.tarot-card:focus-within .view-card-btn,
.tarot-card.ui-open .tarot-card-name,
.tarot-card.ui-open .view-card-btn{
  opacity: 1;
  transform: translateY(0) rotateX(0deg) scale(1);
}

.tarot-card:focus-within .view-card-btn,
.tarot-card.ui-open .view-card-btn{
  pointer-events: auto;
}

/* Desktop hover reveals overlays too */
@media (hover:hover) and (pointer:fine){
  .tarot-card.placed:hover .tarot-card-name,
  .tarot-card.placed:hover .view-card-btn{
    opacity: 1;
    transform: translateY(0) rotateX(0deg) scale(1);
  }
  .tarot-card.placed:hover .view-card-btn{ pointer-events: auto; }
}

/* -------------------------
   Flight / placement (CSS vars)
------------------------- */

.tarot-card.moving,
.tarot-card.placed{
  transition: transform var(--t-fly) var(--e-fly), box-shadow 260ms ease;
  transform:
    translate3d(
      calc(-50% + var(--deck-x, 0px) + var(--tx, 0px) + var(--pop-x, 0px)),
      calc(var(--deck-lift, 0px) + var(--ty, 0px) + var(--pop-y, 0px)),
      0
    )
    scale(var(--ts, var(--picked-scale)))
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    rotateZ(var(--tilt-z, 0deg));
  box-shadow: var(--shadow-2);
}

.tarot-card.repositioning{ transition: none !important; }
.tarot-card.moving{ pointer-events: none; }

/* Soft aura */
.tarot-card.placed::before{
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: var(--card-radius);
  background: radial-gradient(260px 180px at 50% 45%, rgba(160, 60, 255, .20), transparent 70%);
  filter: blur(10px);
  opacity: .9;
  z-index: -1;
  pointer-events: none;
}

/* -------------------------
   Zoom behavior
   - Desktop hover: scale up
   - Mobile tap: scale up via .ui-open
------------------------- */

@media (hover:hover) and (pointer:fine){
  .tarot-card.placed:hover{
    --tilt-x: 2deg;
    transform:
      translate3d(
        calc(-50% + var(--deck-x, 0px) + var(--tx, 0px) + var(--pop-x, 0px)),
        calc(var(--deck-lift, 0px) + var(--ty, 0px) + var(--pop-y, 0px)),
        0
      )
      scale(calc(var(--ts, var(--picked-scale)) * var(--hover-mul)))
      rotateX(var(--tilt-x, 0deg))
      rotateY(var(--tilt-y, 0deg))
      rotateZ(var(--tilt-z, 0deg));
  }
}

/* Mobile / touch: use .ui-open (tap) as hover substitute */
.tarot-card.placed.ui-open{
  --tilt-x: 2deg;
  transform:
    translate3d(
      calc(-50% + var(--deck-x, 0px) + var(--tx, 0px) + var(--pop-x, 0px)),
      calc(var(--deck-lift, 0px) + var(--ty, 0px) + var(--pop-y, 0px)),
      0
    )
    scale(calc(var(--ts, var(--picked-scale)) * var(--open-mul)))
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    rotateZ(var(--tilt-z, 0deg));
}

/* -------------------------
   Special micro-tilt for 1st and 5th picked cards (inward)
   NOTE: uses JS dataset order: data-order="1".."5"
------------------------- */

/* First picked card: tilt toward center (right) */
.tarot-card.placed[data-order="1"]:is(:hover,.ui-open){
  --tilt-y: 10deg;
  --tilt-x: 4deg;
  --pop-x: 10px;  /* pull slightly inward so it doesn't "escape" */
}

/* Fifth picked card: tilt toward center (left) */
.tarot-card.placed[data-order="5"]:is(:hover,.ui-open){
  --tilt-y: -10deg;
  --tilt-x: 4deg;
  --pop-x: -10px;
}

/* Middle cards: very subtle tilt only (keeps it premium but stable) */
.tarot-card.placed[data-order="2"]:is(:hover,.ui-open),
.tarot-card.placed[data-order="3"]:is(:hover,.ui-open),
.tarot-card.placed[data-order="4"]:is(:hover,.ui-open){
  --tilt-x: 3deg;
  --tilt-y: 0deg;
}

/* -------------------------
   Lock deck interactions
------------------------- */

.tarot-deck.is-locked .tarot-card:not(.flipped){
  pointer-events: none;
}

/* IMPORTANT: JS adds class to <html>, not body */
html.tarot-spread-ready .tarot-deck .tarot-card:not(.flipped),
body.tarot-spread-ready .tarot-deck .tarot-card:not(.flipped){
  opacity: var(--deck-dim);
}

/* Cursor */
.tarot-card.flipped{ cursor: default; }

/* -------------------------
   Buttons (Order interpretation)
------------------------- */

#buttonContainer, #buttonContainer1{
  display: none;
}

html.tarot-spread-ready #buttonContainer,
html.tarot-spread-ready #buttonContainer1,
body.tarot-spread-ready #buttonContainer,
body.tarot-spread-ready #buttonContainer1{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 22px auto 34px;
  padding: 0 14px;
}

html.tarot-spread-ready #redirectToProductButton,
html.tarot-spread-ready #redirectToProductButton1,
body.tarot-spread-ready #redirectToProductButton,
body.tarot-spread-ready #redirectToProductButton1{
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 12px 18px;
  border-radius: 999px;
  font-family: 'Exo 2', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: .3px;
  color: #fff;
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
  box-shadow: 0 10px 28px rgba(168, 85, 247, .25);
}

html.tarot-spread-ready #redirectToProductButton:hover,
html.tarot-spread-ready #redirectToProductButton1:hover{
  filter: brightness(1.06);
}

/* -------------------------
   TABLES (table3/table4) – stable + nice UX
------------------------- */

.table3, .table4{
  width: min(1240px, 96vw);
  margin: 24px auto;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;              /* KEY: prevents drifting columns */
  border-radius: 22px;
  overflow: hidden;

  background:
    radial-gradient(900px 420px at 18% 8%, rgba(255,45,85,.22), transparent 58%),
    radial-gradient(900px 420px at 82% 18%, rgba(168,85,247,.24), transparent 58%),
    linear-gradient(135deg, rgba(120, 0, 190, .92), rgba(180, 0, 255, .88));

  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  font-family: 'Exo 2', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.table3 td, .table4 td{
  padding: 16px 16px;
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  vertical-align: top;
  text-align: left;
  line-height: 1.55;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Column widths (stable) */
.table3 td:first-child,
.table4 td:first-child{
  width: 32%;
  font-weight: 800;
}

/* Header rows */
.card-header3 td,
.card-header3{
  background:
    radial-gradient(1200px 260px at 30% 0%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(90deg, rgba(12,12,18,.86), rgba(16,16,24,.78));
  color: #fff;
  font-weight: 900;
  letter-spacing: .4px;
}

.table3 h3{
  margin: 8px 0 6px;
  font-size: clamp(18px, 2.2vw, 28px);
}

/* Row hover = better scanability */
.table3 tbody tr,
.table4 tbody tr{
  transition: background 180ms ease, transform 180ms ease;
}

@media (hover:hover) and (pointer:fine){
  .table3 tbody tr:hover,
  .table4 tbody tr:hover{
    background: rgba(255,255,255,.04);
  }
}

/* Links inside tables */
.table3 a, .table4 a{
  color: #fff;
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,255,255,.55);
  padding-bottom: 1px;
}
.table3 a:hover, .table4 a:hover{
  border-bottom-color: rgba(255,255,255,.95);
}

/* “View card - …” line: make it clean */
#cardsplitedname1 a, #cardsplitedname2 a, #cardsplitedname3 a, #cardsplitedname4 a, #cardsplitedname5 a{
  font-weight: 900;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

/* Table4 specific headers */
.table4 .card-header{ background: rgba(0,0,0,.34); }

/* Mobile table tuning */
@media (max-width: 600px){
  .table3, .table4{
    width: 94vw;
    border-radius: 18px;
  }

  .table3 td, .table4 td{
    padding: 12px 12px;
    font-size: 15px;
    line-height: 1.55;
  }

  .table3 td:first-child,
  .table4 td:first-child{
    width: 40%;
  }

  .table3 h3{ font-size: 22px; }
}

/* -------------------------
   If any old accordion/details exist -> force open via CSS
   (safe: does nothing if you don't use <details>)
------------------------- */

details > summary{ display: none; }
details:not([open]) > :not(summary){ display: block; }

/* -------------------------
   Helper spans (JS)
------------------------- */

#card1,#card2,#card3,#card4,#card5,
#meaning1rev,#meaning2rev,#meaning3rev,#meaning4rev,#meaning5rev,
#energy1rev,#energy2rev,#energy3rev,#energy4rev,#energy5rev,
#wodrs1,#wodrs2,#wodrs3,#wodrs4,#wodrs5{
  display: none !important;
}

/* =========================================================
   Reading UI (DIV version) – styles for your new HTML
   Works with: .tarot-reading, .reading-card, .reading-row
   ========================================================= */

.tarot-reading{
  width: min(1240px, 96vw);
  margin: 22px auto 28px;
  display: grid;
  gap: 18px;
}

.reading-card{
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(900px 420px at 18% 8%, rgba(255,45,85,.20), transparent 58%),
    radial-gradient(900px 420px at 82% 18%, rgba(168,85,247,.22), transparent 58%),
    linear-gradient(135deg, rgba(120, 0, 190, .92), rgba(180, 0, 255, .88));
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  color: #fff;
  font-family: 'Exo 2', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.reading-head{
  padding: 16px 18px 14px;
  background:
    radial-gradient(1200px 260px at 30% 0%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(90deg, rgba(12,12,18,.86), rgba(16,16,24,.78));
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.reading-kicker{
  font-weight: 900;
  letter-spacing: .4px;
  text-transform: uppercase;
  opacity: .92;
  font-size: 13px;
}

.reading-title{
  margin: 6px 0 6px;
  font-size: clamp(20px, 2.4vw, 34px);
  line-height: 1.1;
}

.reading-viewline{
  opacity: .92;
  font-weight: 700;
}
.reading-viewline a{
  color:#fff;
  text-decoration:none;
  border-bottom: 1px solid rgba(255,255,255,.65);
}
.reading-note{ opacity: .86; font-weight: 600; }

.reading-rows{
  padding: 6px 0 0;
}

.reading-row{
  display: grid;
  grid-template-columns: 32% 1fr;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.14);
}

.reading-label{
  padding: 14px 16px;
  font-weight: 900;
  background: rgba(0,0,0,.22);
  border-right: 1px solid rgba(255,255,255,.14);
  letter-spacing: .2px;
}

.reading-value{
  padding: 14px 16px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.reading-value strong{ font-weight: 900; }
.reading-value em{ opacity:.95; }

@media (hover:hover) and (pointer:fine){
  .reading-row:hover .reading-label{ background: rgba(0,0,0,.30); }
  .reading-row:hover .reading-value{ background: rgba(255,255,255,.03); }
}

/* Subhead inside card */
.reading-subhead{
  margin: 14px 16px 8px;
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: .2px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.14);
}

/* Meta boxes */
.reading-meta{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 16px 16px;
}

.meta-box{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  padding: 12px 12px;
  min-height: 72px;
}

.meta-title{
  font-weight: 900;
  opacity: .9;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .35px;
  margin-bottom: 6px;
}

.meta-value{
  font-weight: 700;
  line-height: 1.5;
}
.meta-value a{
  color:#fff;
  text-decoration:none;
  border-bottom: 1px dashed rgba(255,255,255,.62);
}
.meta-value a:hover{
  border-bottom-color: rgba(255,255,255,.95);
}

/* Mobile adjustments */
@media (max-width: 700px){
  .tarot-reading{
    width: 94vw;
  }

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

  .reading-label{
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.14);
  }

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

  .reading-head{
    padding: 14px 14px 12px;
  }
  .reading-title{ font-size: 24px; }
}