.gtt-widget{
  max-width: 1040px;
  margin: 1.5rem auto;
  padding: 1.25rem;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  background: var(--gtt-bg, #fff);
}

.gtt-header h2{ margin: 0 0 .25rem 0; font-size: 1.6rem; }
.gtt-sub{ margin: 0 0 1rem 0; opacity: .75; }

.gtt-row{ display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 720px){ .gtt-row{ grid-template-columns: 2fr 1fr; align-items: start; } }

.gtt-field label{ display:block; font-weight:600; margin-bottom:.35rem; }
.gtt-field input[type="text"], .gtt-field input[type="email"]{
  width: 100%;
  padding: .7rem .8rem;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.2);
  font-size: 1rem;
}

.gtt-actions{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
.gtt-btn{
  appearance:none; border:0; border-radius:12px; padding:.75rem 1rem; font-weight:700;
  cursor:pointer; background: var(--gtt-btn, #0b1b3a); color: #fff;
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
}
.gtt-btn:hover{ filter:brightness(1.06); }
.gtt-btn:disabled{ opacity:.6; cursor:not-allowed; }

.gtt-btn--ghost{ background: transparent; color: var(--gtt-btn, #0b1b3a); border:1px solid rgba(0,0,0,.2); }
.gtt-btn--ghost.is-shuffling{ background:#fff4db; }

.gtt-status{ margin-top:.6rem; opacity:.8; }

.gtt-deck{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap:.6rem;
  padding:.75rem 0;
}
@media (min-width: 720px){ .gtt-deck{ grid-template-columns: repeat(12, minmax(0, 1fr)); } }

.gtt-card{
  width:100%; padding:0; border:0; background:transparent; cursor:pointer;
  transition: transform .15s ease, filter .15s ease, opacity .15s ease;
}
.gtt-card:hover{ transform: translateY(-2px); filter: drop-shadow(0 4px 10px rgba(0,0,0,.18)); }
.gtt-card.is-picked{ opacity: .65; transform: translateY(-1px) scale(.99); }

.gtt-card img{
  width:100%; height:auto; display:block;
  border-radius:10px; border:1px solid rgba(0,0,0,.18);
}

.gtt-reveal-item{
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: .9rem;
  padding: .9rem;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.75);
  margin-bottom: .8rem;
}
@media (min-width: 820px){ .gtt-reveal-item{ grid-template-columns: 170px 1fr; } }

.gtt-reveal-card{
  position: relative;
}
.gtt-reveal-card img{
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.18);
}

.gtt-reveal-card.is-locked img{
  filter: blur(2px) saturate(.8);
}

.gtt-lock-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  background: rgba(0,0,0,.45);
  color:#fff;
  font-weight:800;
  letter-spacing:.3px;
}

.gtt-reveal-text h4{ margin: 0 0 .2rem 0; font-size: 1.25rem; }
.gtt-chip{
  display:inline-block;
  margin-top:.25rem;
  padding:.2rem .55rem;
  border-radius: 999px;
  font-size:.9rem;
  border:1px solid rgba(0,0,0,.2);
  opacity:.85;
}

.gtt-position{
  font-size:.92rem;
  opacity:.75;
  margin-bottom:.15rem;
}

.gtt-paywall{
  margin-bottom: 1.25rem;
  border-radius: 14px;
  border: 2px solid rgba(200,140,0,.35);
  background: #fff7e6;
  overflow: hidden;
}
.gtt-paywall-inner{
  padding: 1.1rem 1.25rem;
}
.gtt-paywall-msg{
  font-weight: 600;
  margin: 0 0 .85rem 0;
  font-size: 1.05em;
}
.gtt-paywall-actions{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-bottom: .75rem;
}
.gtt-paywall-note{
  margin: .5rem 0 0 0;
  font-size: .88em;
  opacity: .8;
}
.gtt-paywall-pass{
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(0,0,0,.1);
}
.gtt-paywall p{ margin: 0 0 .75rem 0; }

/* Unlock button — prominent CTA */
.gtt-btn--unlock{
  font-size: 1.05em;
  padding: .65rem 1.4rem;
  letter-spacing: .02em;
}

/* Pulse animation — draws eye to unlock button when locked card is clicked */
@keyframes gtt-pulse-ring{
  0%   { box-shadow: 0 0 0 0 rgba(200,140,0,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(200,140,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(200,140,0,0); }
}
.gtt-pulse{
  animation: gtt-pulse-ring .55s ease-out;
}

/* Locked slot — shows lock icon and muted appearance */
.gtt-slot.is-locked{
  cursor: pointer;
}
.gtt-slot.is-locked .gtt-slot-card{
  opacity: .55;
  filter: grayscale(.4);
  position: relative;
}
.gtt-lock-icon{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.6rem;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
  z-index: 2;
}

.gtt-msg{ margin-top:.5rem; padding:.6rem .75rem; border-radius:10px; border:1px solid rgba(0,0,0,.2); }
.gtt-msg--success{ background:#ecfff2; }
.gtt-msg--error{ background:#fff0f0; }


/* Spread layout */
.gtt-spread-wrap{ margin-top: .75rem; }
.gtt-spread{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
}
@media (min-width: 720px){
  .gtt-spread{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1020px){
  .gtt-spread{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.gtt-slot{
  width: 100%;
  border: 1px dashed rgba(0,0,0,.28);
  background: rgba(255,255,255,.65);
  border-radius: 16px;
  padding: .65rem .6rem .7rem .6rem;
  cursor: pointer;
  text-align: left;
}

.gtt-slot:hover{ filter: drop-shadow(0 4px 12px rgba(0,0,0,.12)); }

.gtt-slot-card{
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 5;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,.04);
}
.gtt-slot-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 14px;
  border: none;
  outline: 1px solid rgba(0,0,0,.08);
  outline-offset: -1px;
}

.gtt-slot-card:not(.has-card) img{
  opacity: .25;
}

.gtt-slot-label{
  margin-top: .5rem;
  font-weight: 700;
  font-size: .98rem;
  opacity: .9;
}

.gtt-slot-meaning{
  margin-top: .55rem;
  padding-top: .55rem;
  border-top: 1px solid rgba(0,0,0,.10);
  font-size: .95rem;
  line-height: 1.35;
  opacity: .95;
}
.gtt-meaning-title{ font-weight: 800; margin-bottom: .25rem; }
.gtt-meaning-text{ opacity: .9; }

/* Deck card transitions for shuffle movement */
.gtt-card{
  transition: transform .18s ease, filter .15s ease, opacity .15s ease;
}

/* Ghost animation */
.gtt-ghost{
  transform-origin: center center;
  border-radius: 10px;
}
.gtt-deck-wrap{ margin-top: .35rem; }
.gtt-deck-title{ margin: .75rem 0 .35rem 0; opacity: .78; font-weight: 650; }


/* Credits badge + shortcode box */
.gtt-credit-badge{
  display: inline-flex;
  gap: .4rem;
  align-items: center;
  margin: .4rem 0 0 0;
  padding: .35rem .6rem;
  border-radius: 999px;
  font-size: .92rem;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.75);
}
.gtt-credit-badge.is-active{ }
.gtt-credit-badge.is-inactive{ opacity: .75; }

.gtt-credits-box{
  max-width: 700px;
  padding: 1rem;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  background: #fff;
}


/* Layout variants */
.gtt-spread.gtt-layout-grid{ }

.gtt-spread.gtt-layout-celtic{
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-areas:
    ". goal . . s7 s7"
    "past present present future s8 s8"
    ". foundation . . s9 s9"
    ". . . . s10 s10";
  align-items: start;
}

/* Position mapping (0-based indices) */
.gtt-layout-celtic .gtt-pos-0{ grid-area: present; z-index: 2; }
.gtt-layout-celtic .gtt-pos-1{ grid-area: present; z-index: 3; transform: rotate(90deg) scale(.92) translateX(-6%); }
.gtt-layout-celtic .gtt-pos-2{ grid-area: foundation; }
.gtt-layout-celtic .gtt-pos-3{ grid-area: past; }
.gtt-layout-celtic .gtt-pos-4{ grid-area: goal; }
.gtt-layout-celtic .gtt-pos-5{ grid-area: future; }
.gtt-layout-celtic .gtt-pos-6{ grid-area: s7; }
.gtt-layout-celtic .gtt-pos-7{ grid-area: s8; }
.gtt-layout-celtic .gtt-pos-8{ grid-area: s9; }
.gtt-layout-celtic .gtt-pos-9{ grid-area: s10; }

@media (max-width: 719px){
  /* Fallback to simple grid on small screens */
  .gtt-spread.gtt-layout-celtic{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: none;
  }
  .gtt-layout-celtic .gtt-slot{ transform: none !important; }
}


/* ================================
   DARK WITCH THEME
   Deep midnight violet — moody, starlit, ritual
   ================================ */

.gtt-widget.gtt-theme-dark_witch{
  --gtt-bg0:      #08050f;
  --gtt-bg1:      #100820;
  --gtt-surface:  rgba(255,255,255,.06);
  --gtt-surface2: rgba(255,255,255,.10);
  --gtt-text:     rgba(255,255,255,.93);
  --gtt-muted:    rgba(210,190,255,.75);
  --gtt-line:     rgba(180,100,255,.22);
  --gtt-accent:   #b458ff;
  --gtt-accent2:  #38dcb4;
  --gtt-glow:     rgba(180,88,255,.45);
  --gtt-glow2:    rgba(56,220,180,.30);
  font-family: 'Georgia', 'Palatino Linotype', serif;
  color: var(--gtt-text);
  letter-spacing: .015em;
}

.gtt-widget.gtt-theme-dark_witch .gtt-shell{
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(180,100,255,.28);
  background:
    radial-gradient(ellipse 900px 600px at 15% 8%,  rgba(120,40,200,.30) 0%, transparent 55%),
    radial-gradient(ellipse 700px 500px at 85% 20%, rgba(40,180,140,.18) 0%, transparent 55%),
    radial-gradient(ellipse 600px 700px at 50% 90%, rgba(80,10,150,.22) 0%, transparent 60%),
    linear-gradient(160deg, #08050f 0%, #12072a 50%, #090612 100%);
  box-shadow:
    0 30px 80px rgba(0,0,0,.70),
    0 0 0 1px rgba(180,88,255,.14) inset,
    0 0 60px rgba(120,40,200,.12) inset;
}

/* Animated star-field overlay */
.gtt-widget.gtt-theme-dark_witch .gtt-shell::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .60;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.95) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.80) 0 1px, transparent 2px),
    radial-gradient(circle at 45% 55%, rgba(255,255,255,.70) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 78%, rgba(255,255,255,.65) 0 1px, transparent 2px),
    radial-gradient(circle at 28% 85%, rgba(255,255,255,.60) 0 1px, transparent 2px),
    radial-gradient(circle at 60% 30%, rgba(200,150,255,.80) 0 1px, transparent 2px),
    radial-gradient(circle at 20% 60%, rgba(150,220,200,.70) 0 1px, transparent 2px),
    radial-gradient(circle at 92% 50%, rgba(255,255,255,.55) 0 1px, transparent 2px);
  background-size: 180px 180px, 220px 220px, 260px 260px, 200px 200px,
                   240px 240px, 190px 190px, 230px 230px, 210px 210px;
  mix-blend-mode: screen;
}

/* Rotating occult sigil */
.gtt-widget.gtt-theme-dark_witch .gtt-shell::after{
  content: "";
  position: absolute;
  inset: -10%;
  pointer-events: none;
  opacity: .10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%23c080ff' stroke-opacity='1' stroke-width='1'%3E%3Ccircle cx='150' cy='150' r='110'/%3E%3Ccircle cx='150' cy='150' r='70'/%3E%3Ccircle cx='150' cy='150' r='35'/%3E%3Cpath d='M150 40 L150 260'/%3E%3Cpath d='M40 150 L260 150'/%3E%3Cpath d='M72 72 L228 228'/%3E%3Cpath d='M228 72 L72 228'/%3E%3Cpath d='M150 54 L197 183 L100 107 L200 107 L103 183 Z'/%3E%3Ccircle cx='150' cy='40' r='5'/%3E%3Ccircle cx='150' cy='260' r='5'/%3E%3Ccircle cx='40' cy='150' r='5'/%3E%3Ccircle cx='260' cy='150' r='5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 340px 340px;
  mix-blend-mode: screen;
}

@media (prefers-reduced-motion: no-preference){
  .gtt-widget.gtt-theme-dark_witch .gtt-shell::before{
    animation: gttStarDrift 14s ease-in-out infinite alternate;
  }
  .gtt-widget.gtt-theme-dark_witch .gtt-shell::after{
    animation: gttSigilSpin 40s linear infinite;
  }
  @keyframes gttStarDrift{
    from{ transform: translate3d(0,0,0); opacity: .55; }
    to  { transform: translate3d(-10px,8px,0) scale(1.03); opacity: .70; }
  }
  @keyframes gttSigilSpin{
    from{ transform: rotate(0deg); opacity: .08; }
    50% { opacity: .14; }
    to  { transform: rotate(360deg); opacity: .08; }
  }
}

.gtt-widget.gtt-theme-dark_witch .gtt-title,
.gtt-widget.gtt-theme-dark_witch .gtt-header .gtt-title{
  color: #e8ccff;
  letter-spacing: .04em;
  text-shadow:
    0 0 18px rgba(180,88,255,.55),
    0 0 40px rgba(180,88,255,.25),
    0 0 80px rgba(120,40,200,.15);
}

.gtt-widget.gtt-theme-dark_witch .gtt-sub,
.gtt-widget.gtt-theme-dark_witch p,
.gtt-widget.gtt-theme-dark_witch label{
  color: rgba(210,185,255,.78);
}

.gtt-widget.gtt-theme-dark_witch input,
.gtt-widget.gtt-theme-dark_witch textarea,
.gtt-widget.gtt-theme-dark_witch select{
  background: rgba(120,50,200,.12);
  border: 1px solid rgba(180,100,255,.28);
  color: var(--gtt-text);
  border-radius: 10px;
}
.gtt-widget.gtt-theme-dark_witch input::placeholder{ color: rgba(200,170,255,.50); }

.gtt-widget.gtt-theme-dark_witch .gtt-btn{
  background: linear-gradient(135deg, rgba(150,60,240,.40) 0%, rgba(56,180,140,.20) 100%);
  border: 1px solid rgba(180,100,255,.40);
  color: #e8ccff;
  box-shadow: 0 8px 24px rgba(0,0,0,.40), 0 0 0 1px rgba(200,150,255,.08) inset;
  letter-spacing: .04em;
  text-shadow: 0 0 12px rgba(180,88,255,.50);
}
.gtt-widget.gtt-theme-dark_witch .gtt-btn:hover{
  background: linear-gradient(135deg, rgba(160,70,255,.55) 0%, rgba(56,210,160,.28) 100%);
  box-shadow: 0 12px 32px rgba(0,0,0,.50), 0 0 28px rgba(180,88,255,.30);
  transform: translateY(-2px);
}
.gtt-widget.gtt-theme-dark_witch .gtt-btn--ghost{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(180,100,255,.25);
  color: rgba(210,185,255,.85);
}

.gtt-widget.gtt-theme-dark_witch .gtt-credit-badge,
.gtt-widget.gtt-theme-dark_witch .gtt-credits-box{
  background: rgba(120,50,200,.15);
  border: 1px solid rgba(180,100,255,.25);
  color: var(--gtt-text);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}

.gtt-widget.gtt-theme-dark_witch .gtt-slot{
  border: 1px dashed rgba(180,100,255,.35);
  background: rgba(120,50,200,.08);
  box-shadow: 0 0 18px rgba(120,40,200,.10) inset;
}
.gtt-widget.gtt-theme-dark_witch .gtt-slot:hover{
  filter: drop-shadow(0 0 18px rgba(180,88,255,.40));
  border-color: rgba(180,100,255,.60);
}
.gtt-widget.gtt-theme-dark_witch .gtt-slot-card img{
  border: 1px solid rgba(200,150,255,.22);
  box-shadow: 0 8px 20px rgba(0,0,0,.50);
}
.gtt-widget.gtt-theme-dark_witch .gtt-slot-card.is-revealed{
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(180,88,255,.20) inset,
    0 0 40px rgba(180,88,255,.35),
    0 0 80px rgba(120,40,200,.18);
}
.gtt-widget.gtt-theme-dark_witch .gtt-card{
  border-radius: 14px;
  box-shadow: 0 16px 32px rgba(0,0,0,.55);
}
.gtt-widget.gtt-theme-dark_witch .gtt-card:hover{
  filter: drop-shadow(0 12px 28px rgba(56,220,180,.22));
}
.gtt-widget.gtt-theme-dark_witch .gtt-paywall{
  border: 1px solid rgba(180,100,255,.22);
  background: linear-gradient(135deg, rgba(120,50,200,.12), rgba(40,120,100,.08));
  box-shadow: 0 18px 40px rgba(0,0,0,.50);
}
.gtt-widget.gtt-theme-dark_witch .gtt-chip{
  background: rgba(150,60,240,.25);
  border: 1px solid rgba(180,100,255,.40);
  color: #dbbfff;
}
.gtt-widget.gtt-theme-dark_witch .gtt-panel{
  background: rgba(100,40,180,.10);
  border: 1px solid rgba(180,100,255,.20);
}
.gtt-widget.gtt-theme-dark_witch .gtt-panel h3{
  color: #d8b8ff;
  text-shadow: 0 0 16px rgba(180,88,255,.30);
}
.gtt-widget.gtt-theme-dark_witch .gtt-panel ul,
.gtt-widget.gtt-theme-dark_witch .gtt-panel li{ color: rgba(210,185,255,.82); }
.gtt-widget.gtt-theme-dark_witch .gtt-acc-item{
  background: rgba(100,40,180,.10);
  border: 1px solid rgba(180,100,255,.18);
}
.gtt-widget.gtt-theme-dark_witch .gtt-acc-body{
  border-top: 1px solid rgba(180,100,255,.14);
  color: rgba(220,200,255,.88);
}
.gtt-widget.gtt-theme-dark_witch .gtt-slot-meaning{
  border-top: 1px solid rgba(180,100,255,.14);
  color: rgba(220,200,255,.88);
}
.gtt-widget.gtt-theme-dark_witch .gtt-slot-label,
.gtt-widget.gtt-theme-dark_witch .gtt-slot-label{ color: rgba(220,190,255,.92) !important; opacity: 1; }


/* ================================
   CINEMATIC ALTAR THEME
   Warm amber candlelight on black — ritual film noir
   ================================ */

.gtt-widget.gtt-theme-cinematic_altar{
  --gtt-bg0:    #050400;
  --gtt-bg1:    #120800;
  --gtt-text:   rgba(255,240,210,.95);
  --gtt-muted:  rgba(230,200,160,.75);
  --gtt-line:   rgba(200,120,30,.28);
  --gtt-accent: #e8891a;
  --gtt-glow:   rgba(220,140,20,.50);
  font-family: 'Trajan Pro', 'Times New Roman', 'Didot', serif;
  color: var(--gtt-text);
  letter-spacing: .02em;
}

.gtt-widget.gtt-theme-cinematic_altar .gtt-shell{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(180,100,20,.30);
  background:
    radial-gradient(ellipse 700px 500px at 50% 0%,  rgba(200,100,0,.22) 0%, transparent 55%),
    radial-gradient(ellipse 500px 400px at 20% 100%, rgba(120,60,0,.18) 0%, transparent 60%),
    radial-gradient(ellipse 400px 600px at 80% 60%,  rgba(100,20,0,.15) 0%, transparent 55%),
    linear-gradient(170deg, #040300 0%, #150900 40%, #080402 100%);
  box-shadow:
    0 30px 90px rgba(0,0,0,.80),
    0 0 0 1px rgba(200,120,20,.12) inset,
    0 0 80px rgba(180,80,0,.08) inset;
}

/* Film grain texture */
.gtt-widget.gtt-theme-cinematic_altar .gtt-shell::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
}

/* Candle glow vignette */
.gtt-widget.gtt-theme-cinematic_altar .gtt-shell::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 40%, rgba(0,0,0,.50) 100%);
}

.gtt-widget.gtt-theme-cinematic_altar .gtt-title,
.gtt-widget.gtt-theme-cinematic_altar .gtt-header .gtt-title{
  color: #f5d080;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 1.45rem;
  text-shadow:
    0 0 14px rgba(220,150,20,.65),
    0 0 36px rgba(200,100,0,.35),
    0 2px 4px rgba(0,0,0,.80);
}

.gtt-widget.gtt-theme-cinematic_altar .gtt-sub,
.gtt-widget.gtt-theme-cinematic_altar p,
.gtt-widget.gtt-theme-cinematic_altar label{
  color: rgba(220,190,140,.78);
}

.gtt-widget.gtt-theme-cinematic_altar input,
.gtt-widget.gtt-theme-cinematic_altar textarea,
.gtt-widget.gtt-theme-cinematic_altar select{
  background: rgba(80,40,0,.25);
  border: 1px solid rgba(180,100,20,.30);
  color: rgba(255,235,200,.92);
  border-radius: 8px;
}
.gtt-widget.gtt-theme-cinematic_altar input::placeholder{ color: rgba(200,160,90,.50); }

.gtt-widget.gtt-theme-cinematic_altar .gtt-btn{
  background: linear-gradient(135deg, rgba(160,80,10,.55) 0%, rgba(100,50,5,.40) 100%);
  border: 1px solid rgba(200,120,20,.45);
  color: #f5d080;
  box-shadow:
    0 8px 24px rgba(0,0,0,.55),
    0 0 0 1px rgba(200,120,20,.10) inset;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .85em;
  text-shadow: 0 0 10px rgba(220,150,20,.50);
}
.gtt-widget.gtt-theme-cinematic_altar .gtt-btn:hover{
  background: linear-gradient(135deg, rgba(180,100,10,.70) 0%, rgba(120,60,5,.55) 100%);
  box-shadow: 0 12px 36px rgba(0,0,0,.65), 0 0 30px rgba(200,120,0,.30);
  transform: translateY(-2px);
}
.gtt-widget.gtt-theme-cinematic_altar .gtt-btn--ghost{
  background: rgba(100,50,0,.15);
  border: 1px solid rgba(180,100,20,.25);
  color: rgba(220,180,100,.85);
}

.gtt-widget.gtt-theme-cinematic_altar .gtt-credit-badge,
.gtt-widget.gtt-theme-cinematic_altar .gtt-credits-box{
  background: rgba(80,40,0,.30);
  border: 1px solid rgba(180,100,20,.25);
  color: rgba(235,200,140,.90);
  box-shadow: 0 8px 20px rgba(0,0,0,.45);
}

.gtt-widget.gtt-theme-cinematic_altar .gtt-slot{
  border: 1px solid rgba(180,100,20,.28);
  background: rgba(80,40,0,.15);
  box-shadow: 0 0 16px rgba(150,80,0,.10) inset;
}
.gtt-widget.gtt-theme-cinematic_altar .gtt-slot:hover{
  filter: drop-shadow(0 0 16px rgba(200,120,0,.35));
  border-color: rgba(200,120,20,.55);
}
.gtt-widget.gtt-theme-cinematic_altar .gtt-slot-card img{
  border: 1px solid rgba(180,100,20,.25);
  box-shadow: 0 8px 24px rgba(0,0,0,.65), 0 0 12px rgba(150,80,0,.18);
  filter: sepia(.18) contrast(1.06);
}
.gtt-widget.gtt-theme-cinematic_altar .gtt-slot-card.is-revealed{
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(200,120,20,.22) inset,
    0 0 40px rgba(200,120,0,.35),
    0 0 70px rgba(160,80,0,.20);
}
.gtt-widget.gtt-theme-cinematic_altar .gtt-card{
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(0,0,0,.65);
  filter: sepia(.12) contrast(1.04);
}
.gtt-widget.gtt-theme-cinematic_altar .gtt-card:hover{
  filter: sepia(.05) contrast(1.08) drop-shadow(0 12px 28px rgba(200,120,0,.25));
}
.gtt-widget.gtt-theme-cinematic_altar .gtt-paywall{
  border: 1px solid rgba(180,100,20,.22);
  background: linear-gradient(135deg, rgba(80,40,0,.20), rgba(60,30,0,.15));
  box-shadow: 0 18px 45px rgba(0,0,0,.55);
}
.gtt-widget.gtt-theme-cinematic_altar .gtt-chip{
  background: rgba(160,80,10,.28);
  border: 1px solid rgba(200,120,20,.38);
  color: #f0c860;
}
.gtt-widget.gtt-theme-cinematic_altar .gtt-panel,
.gtt-widget.gtt-theme-cinematic_altar .gtt-acc-item{
  background: rgba(70,35,0,.18);
  border: 1px solid rgba(180,100,20,.20);
}
.gtt-widget.gtt-theme-cinematic_altar .gtt-panel h3{
  color: #e8c060;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .95em;
  text-shadow: 0 0 14px rgba(200,130,0,.45);
}
.gtt-widget.gtt-theme-cinematic_altar .gtt-panel ul,
.gtt-widget.gtt-theme-cinematic_altar .gtt-panel li{ color: rgba(220,185,130,.82); }
.gtt-widget.gtt-theme-cinematic_altar .gtt-acc-body{
  border-top: 1px solid rgba(180,100,20,.16);
  color: rgba(225,190,140,.88);
}
.gtt-widget.gtt-theme-cinematic_altar .gtt-slot-meaning{
  border-top: 1px solid rgba(180,100,20,.14);
  color: rgba(225,190,140,.88);
}
.gtt-widget.gtt-theme-cinematic_altar .gtt-slot-label{ color: rgba(240,210,140,.90) !important; }


/* ================================
   MINIMAL LUXE OCCULT THEME
   Bone-white linen, gold foil, editorial silence
   ================================ */

.gtt-widget.gtt-theme-minimal_luxe{
  --gtt-bg0:   #faf8f5;
  --gtt-bg1:   #f3f0eb;
  --gtt-text:  #1a1208;
  --gtt-muted: rgba(30,20,10,.58);
  --gtt-line:  rgba(30,20,10,.10);
  --gtt-gold:  #8a6a20;
  --gtt-gold2: #c4982a;
  font-family: 'Optima', 'Gill Sans', 'Futura', 'Trebuchet MS', sans-serif;
  color: var(--gtt-text);
  letter-spacing: .03em;
}

.gtt-widget.gtt-theme-minimal_luxe .gtt-shell{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(140,100,30,.18);
  background: linear-gradient(150deg, #faf8f5 0%, #f2eee7 60%, #ede8e0 100%);
  box-shadow:
    0 20px 60px rgba(0,0,0,.08),
    0 4px 16px rgba(0,0,0,.05),
    0 0 0 1px rgba(180,140,60,.10) inset;
}

/* Subtle linen texture */
.gtt-widget.gtt-theme-minimal_luxe .gtt-shell::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect x='0' y='0' width='2' height='2' fill='%23000' opacity='.5'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23000' opacity='.5'/%3E%3C/svg%3E");
  background-size: 3px 3px;
  mix-blend-mode: multiply;
}

/* Gold foil accent line at top */
.gtt-widget.gtt-theme-minimal_luxe .gtt-shell::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(140,100,20,.15) 10%,
    rgba(196,152,42,.80) 30%,
    rgba(220,180,60,.95) 50%,
    rgba(196,152,42,.80) 70%,
    rgba(140,100,20,.15) 90%,
    transparent 100%);
}

.gtt-widget.gtt-theme-minimal_luxe .gtt-title,
.gtt-widget.gtt-theme-minimal_luxe .gtt-header .gtt-title{
  color: #1a1208;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 1.30rem;
  font-weight: 300;
}

.gtt-widget.gtt-theme-minimal_luxe .gtt-sub,
.gtt-widget.gtt-theme-minimal_luxe p,
.gtt-widget.gtt-theme-minimal_luxe label{
  color: rgba(30,20,10,.60);
}

.gtt-widget.gtt-theme-minimal_luxe input,
.gtt-widget.gtt-theme-minimal_luxe textarea,
.gtt-widget.gtt-theme-minimal_luxe select{
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(140,100,30,.20);
  color: #1a1208;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.04) inset;
}
.gtt-widget.gtt-theme-minimal_luxe input::placeholder{ color: rgba(30,20,10,.35); }

.gtt-widget.gtt-theme-minimal_luxe .gtt-btn{
  background: #1a1208;
  border: 0;
  color: #f5efdf;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: .82em;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.gtt-widget.gtt-theme-minimal_luxe .gtt-btn:hover{
  background: #2e2010;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  transform: translateY(-1px);
}
.gtt-widget.gtt-theme-minimal_luxe .gtt-btn--ghost{
  background: transparent;
  border: 1px solid rgba(30,20,10,.22);
  color: rgba(30,20,10,.80);
  box-shadow: none;
}
.gtt-widget.gtt-theme-minimal_luxe .gtt-btn--ghost:hover{
  background: rgba(30,20,10,.05);
}

.gtt-widget.gtt-theme-minimal_luxe .gtt-credit-badge,
.gtt-widget.gtt-theme-minimal_luxe .gtt-credits-box{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(140,100,30,.16);
  color: #1a1208;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

.gtt-widget.gtt-theme-minimal_luxe .gtt-slot{
  border: 1px solid rgba(140,100,30,.22);
  background: rgba(255,255,255,.55);
  box-shadow: 0 2px 8px rgba(0,0,0,.05) inset;
}
.gtt-widget.gtt-theme-minimal_luxe .gtt-slot:hover{
  border-color: rgba(140,100,30,.50);
  box-shadow: 0 6px 20px rgba(140,100,30,.12);
}
.gtt-widget.gtt-theme-minimal_luxe .gtt-slot-card img{
  border: 1px solid rgba(140,100,30,.18);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.gtt-widget.gtt-theme-minimal_luxe .gtt-slot-card.is-revealed{
  border-radius: 12px;
  box-shadow:
    0 0 0 2px rgba(196,152,42,.30),
    0 12px 30px rgba(0,0,0,.14);
}
.gtt-widget.gtt-theme-minimal_luxe .gtt-card{
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,.10);
}
.gtt-widget.gtt-theme-minimal_luxe .gtt-card:hover{
  box-shadow: 0 14px 32px rgba(0,0,0,.15);
  transform: translateY(-2px);
}
.gtt-widget.gtt-theme-minimal_luxe .gtt-paywall{
  border: 1px solid rgba(140,100,30,.16);
  background: rgba(255,255,255,.65);
  box-shadow: 0 12px 30px rgba(0,0,0,.07);
}
.gtt-widget.gtt-theme-minimal_luxe .gtt-chip{
  background: rgba(196,152,42,.14);
  border: 1px solid rgba(140,100,30,.28);
  color: #7a5c18;
}
.gtt-widget.gtt-theme-minimal_luxe .gtt-panel,
.gtt-widget.gtt-theme-minimal_luxe .gtt-acc-item{
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(140,100,30,.12);
}
.gtt-widget.gtt-theme-minimal_luxe .gtt-panel h3{
  color: #8a6a20;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: .88em;
  font-weight: 600;
}
.gtt-widget.gtt-theme-minimal_luxe .gtt-panel ul,
.gtt-widget.gtt-theme-minimal_luxe .gtt-panel li{ color: rgba(30,20,10,.70); }
.gtt-widget.gtt-theme-minimal_luxe .gtt-acc-body{
  border-top: 1px solid rgba(140,100,30,.10);
  color: rgba(30,20,10,.75);
}
.gtt-widget.gtt-theme-minimal_luxe .gtt-slot-meaning{
  border-top: 1px solid rgba(140,100,30,.12);
  color: rgba(30,20,10,.75);
}
.gtt-widget.gtt-theme-minimal_luxe .gtt-slot-label{ color: rgba(30,20,10,.65) !important; }
.gtt-widget.gtt-theme-minimal_luxe .gtt-acc-thumb{
  border: 1px solid rgba(140,100,30,.16);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}


/* ================================
   NEON WITCH THEME
   Cyberpunk occult — electric cyan + hot magenta on void black
   ================================ */

.gtt-widget.gtt-theme-neon_witch{
  --gtt-bg0:   #010108;
  --gtt-bg1:   #040214;
  --gtt-text:  rgba(230,255,250,.96);
  --gtt-muted: rgba(160,240,220,.70);
  --gtt-line:  rgba(0,255,200,.20);
  --gtt-cyan:  #00ffc8;
  --gtt-pink:  #ff00c8;
  --gtt-glow1: rgba(0,255,200,.50);
  --gtt-glow2: rgba(255,0,200,.45);
  font-family: 'Share Tech Mono', 'Courier New', 'Lucida Console', monospace;
  color: var(--gtt-text);
  letter-spacing: .04em;
}

.gtt-widget.gtt-theme-neon_witch .gtt-shell{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,255,200,.22);
  background:
    radial-gradient(ellipse 600px 400px at 15% 10%, rgba(0,200,140,.14) 0%, transparent 55%),
    radial-gradient(ellipse 600px 500px at 85% 25%, rgba(200,0,180,.12) 0%, transparent 55%),
    radial-gradient(ellipse 800px 400px at 50% 90%, rgba(0,100,200,.10) 0%, transparent 60%),
    linear-gradient(165deg, #010108 0%, #060218 50%, #020010 100%);
  box-shadow:
    0 24px 80px rgba(0,0,0,.85),
    0 0 0 1px rgba(0,255,200,.12) inset,
    0 0 50px rgba(0,200,140,.06) inset;
}

/* Scanline effect */
.gtt-widget.gtt-theme-neon_witch .gtt-shell::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .06;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,255,200,.15) 2px,
    rgba(0,255,200,.15) 4px
  );
  mix-blend-mode: screen;
}

/* Corner bracket decorations via radial glow */
.gtt-widget.gtt-theme-neon_witch .gtt-shell::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 200px 200px at 0% 0%,   rgba(0,255,200,.10) 0%, transparent 70%),
    radial-gradient(ellipse 200px 200px at 100% 0%,  rgba(255,0,200,.08) 0%, transparent 70%),
    radial-gradient(ellipse 200px 200px at 0% 100%,  rgba(255,0,200,.07) 0%, transparent 70%),
    radial-gradient(ellipse 200px 200px at 100% 100%,rgba(0,255,200,.08) 0%, transparent 70%);
}
/* Ensure all direct children of .gtt-shell sit above the pseudo-element overlays */
.gtt-widget.gtt-theme-neon_witch .gtt-shell > *{
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference){
  .gtt-widget.gtt-theme-neon_witch .gtt-shell::before{
    animation: gttScanline 8s linear infinite;
  }
  @keyframes gttScanline{
    from{ background-position: 0 0; }
    to  { background-position: 0 40px; }
  }
}

.gtt-widget.gtt-theme-neon_witch .gtt-title,
.gtt-widget.gtt-theme-neon_witch .gtt-header .gtt-title{
  color: #00ffc8;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 1.35rem;
  text-shadow:
    0 0 10px rgba(0,255,200,.90),
    0 0 25px rgba(0,255,200,.55),
    0 0 55px rgba(0,255,200,.28),
    0 0 2px #000;
}

.gtt-widget.gtt-theme-neon_witch .gtt-sub,
.gtt-widget.gtt-theme-neon_witch p,
.gtt-widget.gtt-theme-neon_witch label{
  color: rgba(150,240,210,.72);
  text-transform: uppercase;
  font-size: .88em;
  letter-spacing: .06em;
}

.gtt-widget.gtt-theme-neon_witch input,
.gtt-widget.gtt-theme-neon_witch textarea,
.gtt-widget.gtt-theme-neon_witch select{
  background: rgba(0,255,200,.05);
  border: 1px solid rgba(0,255,200,.28);
  color: rgba(200,255,240,.95);
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0,255,200,.06) inset;
}
.gtt-widget.gtt-theme-neon_witch input::placeholder{ color: rgba(0,220,170,.40); }

.gtt-widget.gtt-theme-neon_witch .gtt-btn{
  background: transparent;
  border: 1px solid rgba(0,255,200,.55);
  color: #00ffc8;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: .82em;
  text-shadow: 0 0 10px rgba(0,255,200,.70);
  box-shadow:
    0 0 14px rgba(0,255,200,.18),
    0 0 0 1px rgba(0,255,200,.08) inset;
}
.gtt-widget.gtt-theme-neon_witch .gtt-btn:hover{
  background: rgba(0,255,200,.10);
  border-color: rgba(0,255,200,.85);
  box-shadow:
    0 0 30px rgba(0,255,200,.35),
    0 0 60px rgba(0,255,200,.15),
    0 0 0 1px rgba(0,255,200,.15) inset;
  transform: translateY(-2px);
}
.gtt-widget.gtt-theme-neon_witch .gtt-btn--ghost{
  border-color: rgba(255,0,200,.40);
  color: #ff00c8;
  text-shadow: 0 0 10px rgba(255,0,200,.60);
  box-shadow: 0 0 12px rgba(255,0,200,.12);
}
.gtt-widget.gtt-theme-neon_witch .gtt-btn--ghost:hover{
  background: rgba(255,0,200,.08);
  border-color: rgba(255,0,200,.75);
  box-shadow: 0 0 28px rgba(255,0,200,.30);
}

.gtt-widget.gtt-theme-neon_witch .gtt-credit-badge,
.gtt-widget.gtt-theme-neon_witch .gtt-credits-box{
  background: rgba(0,255,200,.05);
  border: 1px solid rgba(0,255,200,.22);
  color: rgba(200,255,240,.92);
  box-shadow: 0 0 16px rgba(0,255,200,.10);
}

.gtt-widget.gtt-theme-neon_witch .gtt-slot{
  border: 1px solid rgba(0,255,200,.25);
  background: rgba(0,255,200,.04);
  box-shadow: 0 0 12px rgba(0,255,200,.06) inset;
}
.gtt-widget.gtt-theme-neon_witch .gtt-slot:hover{
  border-color: rgba(0,255,200,.65);
  filter: drop-shadow(0 0 20px rgba(0,255,200,.40));
}
.gtt-widget.gtt-theme-neon_witch .gtt-slot-card img{
  border: 1px solid rgba(0,255,200,.20);
  box-shadow: 0 0 20px rgba(0,255,200,.14), 0 8px 24px rgba(0,0,0,.60);
  filter: saturate(1.15) contrast(1.08);
}
.gtt-widget.gtt-theme-neon_witch .gtt-slot-card.is-revealed{
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(0,255,200,.20) inset,
    0 0 35px rgba(0,255,200,.40),
    0 0 70px rgba(0,255,200,.18),
    0 0 35px rgba(255,0,200,.16);
}
.gtt-widget.gtt-theme-neon_witch .gtt-card{
  border-radius: 12px;
  box-shadow: 0 0 14px rgba(0,255,200,.10), 0 12px 28px rgba(0,0,0,.65);
  filter: saturate(1.10);
}
.gtt-widget.gtt-theme-neon_witch .gtt-card:hover{
  filter: saturate(1.20) contrast(1.08) drop-shadow(0 0 16px rgba(0,255,200,.28));
}
.gtt-widget.gtt-theme-neon_witch .gtt-paywall{
  border: 1px solid rgba(0,255,200,.18);
  background: rgba(0,255,200,.04);
  box-shadow: 0 0 24px rgba(0,255,200,.08), 0 18px 40px rgba(0,0,0,.55);
}
.gtt-widget.gtt-theme-neon_witch .gtt-chip{
  background: rgba(0,255,200,.12);
  border: 1px solid rgba(0,255,200,.35);
  color: #00ffc8;
  text-shadow: 0 0 8px rgba(0,255,200,.60);
}
.gtt-widget.gtt-theme-neon_witch .gtt-panel,
.gtt-widget.gtt-theme-neon_witch .gtt-acc-item{
  background: rgba(0,255,200,.04);
  border: 1px solid rgba(0,255,200,.18);
}
.gtt-widget.gtt-theme-neon_witch .gtt-panel h3{
  color: #ff00c8;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .88em;
  text-shadow: 0 0 12px rgba(255,0,200,.55);
}
.gtt-widget.gtt-theme-neon_witch .gtt-panel ul,
.gtt-widget.gtt-theme-neon_witch .gtt-panel li{ color: rgba(180,255,235,.78); }
.gtt-widget.gtt-theme-neon_witch .gtt-acc-body{
  border-top: 1px solid rgba(0,255,200,.14);
  color: rgba(180,255,235,.88);
}
.gtt-widget.gtt-theme-neon_witch .gtt-slot-meaning{
  border-top: 1px solid rgba(0,255,200,.14);
  color: rgba(180,255,235,.88);
}
.gtt-widget.gtt-theme-neon_witch .gtt-slot-label{ color: rgba(0,255,200,.90) !important; text-shadow: 0 0 10px rgba(0,255,200,.50); }


/* ================================
   DEFAULT THEME (light fallback)
   ================================ */
.gtt-widget.gtt-theme-default .gtt-shell{
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 40px rgba(0,0,0,.07);
}



/* Reversed cards display upside down */
.gtt-slot-card.is-reversed img{
  transform: rotate(180deg);
}
/* Fix 2: Lightbox overlay — appended to <body> so it is completely outside
   the slot DOM. No position instability, no hover-triggered flicker. */
#gtt-lightbox{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0);
  cursor: zoom-out;
  transition: background .2s ease;
}
#gtt-lightbox.gtt-lightbox--open{
  display: flex;
  background: rgba(0,0,0,.72);
}
#gtt-lightbox img{
  display: block;
  width: clamp(160px, 38vw, 260px);
  height: auto;
  border-radius: 12px;
  box-shadow: 0 28px 90px rgba(0,0,0,.7);
  opacity: 0;
  transform: scale(.88);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
#gtt-lightbox.gtt-lightbox--open img{
  opacity: 1;
  transform: scale(1);
}
#gtt-lightbox.gtt-lightbox--closing img{
  opacity: 0;
  transform: scale(.88);
}
#gtt-lightbox img.is-reversed{
  transform: scale(1) rotate(180deg);
}
#gtt-lightbox.gtt-lightbox--closing img.is-reversed{
  transform: scale(.88) rotate(180deg);
}

/* Fix 3: Reversed thumbnail in accordion */
.gtt-acc-thumb img.is-reversed{
  transform: rotate(180deg);
}


/* Deck cards - responsive sizing */
.gtt-deck{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.gtt-deck .gtt-card{
  width: clamp(64px, 18vw, 92px);
  height: clamp(96px, 27vw, 138px);
}
@media (max-width: 520px){
  .gtt-deck{ padding-bottom: .25rem; }
  .gtt-deck .gtt-card{
    width: clamp(74px, 22vw, 110px);
    height: clamp(112px, 33vw, 165px);
  }
}

/* Spread slots - responsive so cards aren't tiny on mobile */
.gtt-spread .gtt-slot{
  width: clamp(74px, 22vw, 108px);
  height: clamp(112px, 33vw, 162px);
}
@media (max-width: 520px){
  .gtt-spread .gtt-slot{
    width: clamp(82px, 26vw, 120px);
    height: clamp(122px, 38vw, 180px);
  }
}

/* Used deck cards */
.gtt-card.is-used{
  opacity: .35;
  filter: grayscale(.4);
  cursor: not-allowed;
}


/* Clean reveal: meanings only in accordion */
.gtt-slot-meaning{ display:none !important; }

/* Accordion thumbnail */
.gtt-acc-title{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
}
.gtt-acc-thumb{
  width: 40px;
  height: 60px;
  border-radius: 10px;
  overflow:hidden;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.gtt-acc-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.gtt-widget.gtt-theme-minimal_luxe .gtt-acc-thumb{
  border: 1px solid rgba(20,10,40,.12);
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

/* Ensure panel headings are readable */
.gtt-widget .gtt-panel h3{ color: rgba(255,255,255,.92); }
.gtt-widget.gtt-theme-minimal_luxe .gtt-panel h3{ color: rgba(20,10,40,.92); }


/* --- Celtic Cross refined layout (standard shape) --- */
/* Uses 5 columns: past - center - future - staff */
.gtt-spread.gtt-layout-celtic{
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 1.15rem;
  grid-template-areas:
    ".    goal     .     staff7 staff7"
    "past present future staff8 staff8"
    ". foundation .     staff9 staff9"
    ".    .       .     staff10 staff10";
  align-items: start;
}

/* Center cross */
.gtt-layout-celtic .gtt-pos-0{ grid-area: present; z-index: 2; }
.gtt-layout-celtic .gtt-pos-1{ grid-area: present; z-index: 3; transform: rotate(90deg) scale(.92); transform-origin: 50% 50%; }
.gtt-layout-celtic .gtt-pos-2{ grid-area: foundation; }
.gtt-layout-celtic .gtt-pos-3{ grid-area: past; }
.gtt-layout-celtic .gtt-pos-4{ grid-area: goal; }
.gtt-layout-celtic .gtt-pos-5{ grid-area: future; }

/* Staff column */
.gtt-layout-celtic .gtt-pos-6{ grid-area: staff7; }
.gtt-layout-celtic .gtt-pos-7{ grid-area: staff8; }
.gtt-layout-celtic .gtt-pos-8{ grid-area: staff9; }
.gtt-layout-celtic .gtt-pos-9{ grid-area: staff10; }

/* Keep labels readable */
.gtt-widget.gtt-theme-dark_witch .gtt-slot-label,
.gtt-widget.gtt-theme-cinematic_altar .gtt-slot-label,
.gtt-widget.gtt-theme-neon_witch .gtt-slot-label{
  color: rgba(255,255,255,.88) !important;
  text-shadow: 0 0 14px rgba(0,0,0,.55);
}
.gtt-widget.gtt-theme-dark_witch .gtt-slot-label{ opacity: 1; }

/* Prevent overlap on small screens: fall back to grid */
@media (max-width: 720px){
  .gtt-spread.gtt-layout-celtic{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: none;
    gap: .95rem;
  }
  .gtt-layout-celtic .gtt-slot{ transform: none !important; }
}


/* ================================
   v4.5.3 UI polish: nicer scrollbars
   ================================ */

/* Scrollbar styling (WebKit: Chrome, Safari, Edge) */
.gtt-spread-wrap::-webkit-scrollbar,
.gtt-deck::-webkit-scrollbar{
  height: 10px;
}
.gtt-spread-wrap::-webkit-scrollbar-track,
.gtt-deck::-webkit-scrollbar-track{
  background: rgba(255,255,255,.06);
  border-radius: 999px;
}
.gtt-spread-wrap::-webkit-scrollbar-thumb,
.gtt-deck::-webkit-scrollbar-thumb{
  background: rgba(180,88,255,.35);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.18);
}
.gtt-spread-wrap::-webkit-scrollbar-thumb:hover,
.gtt-deck::-webkit-scrollbar-thumb:hover{
  background: rgba(180,88,255,.50);
}

/* Scrollbar styling (Firefox) */
.gtt-spread-wrap,
.gtt-deck{
  scrollbar-width: thin;
  scrollbar-color: rgba(180,88,255,.45) rgba(255,255,255,.06);
}






/* ================================
   v4.5.3.3 Celtic Cross: force specific labels to one line
   (2. Challenge, 3. Foundation, 8. Environment, 9. Hopes/Fears, 10. Outcome)
   ================================ */
.gtt-layout-celtic .gtt-pos-1 .gtt-slot-label,
.gtt-layout-celtic .gtt-pos-2 .gtt-slot-label,
.gtt-layout-celtic .gtt-pos-7 .gtt-slot-label,
.gtt-layout-celtic .gtt-pos-8 .gtt-slot-label,
.gtt-layout-celtic .gtt-pos-9 .gtt-slot-label{
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  display: inline-block;
  font-size: 0.92rem;
}


/* ================================
   v4.5.3.9 Mobile Celtic Cross fix (iPhone + Android)
   Goal: keep the SAME Celtic layout, allow horizontal scroll, and prevent staff column piling.
   ================================ */
.gtt-spread-wrap{
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Ensure no parent container clips horizontal scrolling */
.gtt-widget, .gtt-step, .gtt-step-pick, .gtt-step-reveal{
  overflow: visible !important;
}

@media (max-width: 720px){
  /* Keep the Celtic cross wider than the viewport so horizontal scroll is possible */
  .gtt-spread.gtt-layout-celtic{
    min-width: 930px !important;
    width: max-content !important;
  }

  /* Re-assert the exact grid template/areas used on desktop (area names: goal/past/present/future/foundation/s7/s8/s9/s10) */
  .gtt-spread.gtt-layout-celtic{
    grid-template-columns: 210px 210px 210px 240px !important;
    grid-template-areas:
      ".      goal      .       s7"
      "past   present   future  s8"
      ".   foundation   .       s9"
      ".      .         .       s10" !important;
    gap: 28px 34px !important;
    justify-content: center !important;
  }

  /* Map positions explicitly to prevent auto-placement/piling */
  .gtt-layout-celtic .gtt-pos-0{ grid-area: present !important; }   /* 1 Present */
  .gtt-layout-celtic .gtt-pos-1{ grid-area: present !important; pointer-events:none !important; } /* 2 Challenge overlays */
  .gtt-layout-celtic .gtt-pos-2{ grid-area: foundation !important; }/* 3 Foundation */
  .gtt-layout-celtic .gtt-pos-3{ grid-area: past !important; }      /* 4 Recent Past */
  .gtt-layout-celtic .gtt-pos-4{ grid-area: goal !important; }      /* 5 Goal */
  .gtt-layout-celtic .gtt-pos-5{ grid-area: future !important; }    /* 6 Near Future */
  .gtt-layout-celtic .gtt-pos-6{ grid-area: s7 !important; }        /* 7 You */
  .gtt-layout-celtic .gtt-pos-7{ grid-area: s8 !important; }        /* 8 Environment */
  .gtt-layout-celtic .gtt-pos-8{ grid-area: s9 !important; }        /* 9 Hopes/Fears */
  .gtt-layout-celtic .gtt-pos-9{ grid-area: s10 !important; }       /* 10 Outcome */

  
  /* Spacing between spread and deck section */
  .gtt-spread-wrap{ padding-bottom: 18px !important; }
  .gtt-deck-wrap{ margin-top: 14px !important; }
}


/* ================================
   v4.5.3.10 Mobile label fix (iPhone + Android)
   Keep position numbers/titles visible without Safari "pile-up".
   ================================ */
@media (max-width: 720px){
  /* Ensure labels render in normal flow (no transforms/absolute positioning leaks) */
  .gtt-step-pick .gtt-spread .gtt-slot-label,
  .gtt-step-reveal .gtt-spread .gtt-slot-label{
    display: inline-block !important;
    position: static !important;
    transform: none !important;
    white-space: normal;
    background: rgba(0,0,0,.18);
    padding: 4px 8px;
    border-radius: 10px;
  }

  /* Challenge label: show as a normal label (not rotated) on mobile */
  .gtt-layout-celtic .gtt-pos-1 .gtt-slot-label{
    white-space: nowrap !important;
    margin-top: 10px !important;
  }

  /* Add breathing room so labels never collide with the deck heading */
  .gtt-spread-wrap{ padding-bottom: 26px !important; }
  .gtt-deck-wrap{ margin-top: 18px !important; }
}


/* ================================
   v4.5.3.11 Mobile: Challenge card perpendicular across Present + zoom support
   ================================ */
@media (max-width: 720px){
  /* Keep Challenge as a true overlay in the Present cell */
  .gtt-layout-celtic .gtt-pos-1{
    grid-area: present !important;
    pointer-events: none !important;
    position: relative !important;
    z-index: 6 !important; /* above present visually */
  }
  .gtt-layout-celtic .gtt-pos-0{
    grid-area: present !important;
    position: relative !important;
    z-index: 5 !important;
  }
  .gtt-layout-celtic .gtt-pos-1 .gtt-slot-card{
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) rotate(90deg) scale(.92) !important;
    transform-origin: 50% 50% !important;
  }
}

/* Zoom: spread scales with CSS variable */
.gtt-spread{
  transform: scale(var(--gtt-zoom, 1));
  transform-origin: top left;
}
.gtt-spread-wrap{
  overflow: auto; /* allow pan when zoomed */
}

/* Zoom controls */
.gtt-zoombar{
  display:flex;
  gap:.5rem;
  align-items:center;
  justify-content:flex-end;
  margin: .5rem 0 .25rem;
}
.gtt-zoombar .gtt-zoombtn{
  appearance:none;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.9);
  padding: .35rem .6rem;
  border-radius: 12px;
  cursor:pointer;
  font-weight: 700;
}
.gtt-zoombar .gtt-zoombtn:active{ transform: translateY(1px); }


/* v4.5.3.12 Celtic Cross: keep 1. Present label on one line */
.gtt-layout-celtic .gtt-pos-0 .gtt-slot-label{
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}