/* ---------- page layout: board | panel ---------- */
  .cc-layout{ display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,420px); gap:24px;
    max-width:1500px; margin:0 auto; height:calc(100vh - var(--cc-top, 90px) - 18px); min-height:480px; }
  /* The board isn't zoomed with a CSS scale: ccFit() sets whole-pixel sizes (--cw/--ch) and positions,
     so cards sit exactly on screen pixels and their art is drawn 1:1 (see card-render.js). */
  .cc-board{ position:absolute; left:0; top:0; width:880px; height:760px; --s:1; --cw:140px; --ch:210px; }

  /* ---------- board / deck / cards ---------- */
  .cc-deck .cc-back img, .cc-deck .cc-back canvas{ width:100%; height:100%; object-fit:cover; display:block; }

  .cc-slot{ position:absolute; display:flex; flex-direction:column; align-items:center; gap:4px;
    transition:transform .62s cubic-bezier(.18,.72,.24,1), opacity .3s ease; }
  .cc-slot.hoverable:hover .cc-card{ transform:scale(1.16) translateY(-12px); transition:transform .22s cubic-bezier(.2,.8,.3,1); }
  .cc-slot.is-cross.hoverable:hover .cc-card{ transform:rotate(90deg) scale(1.16); }

  .cc-poslabel{ font-family:var(--font-body); font-size:calc(9px * var(--s)); letter-spacing:.06em; text-transform:uppercase;
    color:var(--gold); opacity:.6; text-align:center; white-space:nowrap; order:-1; transition:opacity .3s ease; }
  .cc-slot.is-cross .cc-poslabel{ display:none; }
  .cc-slot.is-cross .cc-card{ transform:rotate(90deg); }
  .cc-slot.is-cross{ z-index:5; }

  /* the position being read: lifted above its neighbours and ringed in gold */
  .cc-slot.active{ z-index:26; }
  .cc-slot.active.face-down .cc-tilt{ animation:cc-glow 1.8s ease-in-out infinite; }
  @keyframes cc-glow{
    0%,100%{ box-shadow:0 0 0 2px rgba(var(--gold-rgb),.55), 0 0 14px rgba(var(--gold-rgb),.25), 0 12px 26px rgba(var(--shadow-rgb),.55); }
    50%    { box-shadow:0 0 0 2px var(--gold), 0 0 34px rgba(var(--gold-rgb),.6), 0 12px 26px rgba(var(--shadow-rgb),.55); }
  }

  .cc-face img, .cc-face canvas{ width:100%; height:100%; object-fit:contain; display:block; }
  .cc-back-face{ background:var(--midnight-2); display:flex; align-items:center; justify-content:center; }
  .cc-card.reversed .cc-front img, .cc-card.reversed .cc-front canvas{ transform:rotate(180deg); }

  /* text face for cards that don't have artwork yet */

  .cc-ghost.is-cross{ transform:rotate(90deg); border-color:rgba(var(--gold-rgb),.14); color:transparent; }
  .cc-ghost small{ position:absolute; top:calc(-16px * var(--s)); left:0; right:0; text-align:center; font-family:var(--font-body); font-size:calc(9px * var(--s));
    letter-spacing:.06em; text-transform:uppercase; color:rgba(var(--gold-rgb),.7); }
  .cc-ghost.is-cross small{ display:none; }

  .cc-board.dimmed .cc-slot{ opacity:.28; filter:blur(1px); }
  .cc-board.dimmed .cc-slot.source{ opacity:0; }

  /* question form (shared markup from tarot-core.js), restyled to sit inside the panel */

  .cc-chip{ min-width:30px; height:30px; padding:0; border-radius:15px; border:1px solid rgba(var(--gold-rgb),.3); background:none;
    color:var(--frost); font-family:var(--font-heading); font-size:calc(0.75rem * var(--text-scale)); cursor:pointer; transition:background .2s, color .2s, border-color .2s; }

  .cc-view.swap > *{ animation:cc-in .35s ease both; }
  @keyframes cc-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
  .v-card{ display:flex; gap:14px; align-items:center; margin:14px 0 12px; }
  .v-thumb{ position:relative; flex-shrink:0; width:62px; height:93px; padding:0; border:0; border-radius:6px; overflow:hidden; cursor:zoom-in;
    background:var(--midnight); box-shadow:0 4px 12px rgba(var(--shadow-rgb),.5); }
  .v-thumb img, .v-thumb canvas{ width:100%; height:100%; object-fit:cover; display:block; }
  .v-thumb.reversed img, .v-thumb.reversed canvas, .v-thumb.reversed .cc-textface{ transform:rotate(180deg); }
  .v-name{ font-family:var(--font-heading); font-size:calc(1.25rem * var(--text-scale)); line-height:1.25; color:var(--bone); }
  .v-figure{ font-size:calc(0.78125rem * var(--text-scale)); font-style:italic; color:var(--frost); opacity:.6; margin-top:3px; }
  .v-orient{ display:inline-block; margin-top:6px; font-size:calc(0.625rem * var(--text-scale)); letter-spacing:.12em; text-transform:uppercase; padding:2px 8px; border-radius:999px;
    color:var(--aurora); border:1px solid rgba(var(--aurora-soft-rgb),.4); }
  .v-facedown{ margin:22px 0; padding:22px; text-align:center; border:1px dashed rgba(var(--gold-rgb),.3); border-radius:10px; }
  .v-facedown p{ font-style:italic; color:var(--frost); opacity:.7; margin:0 0 14px; }
  .v-synth{ white-space:pre-line; font-size:calc(0.90625rem * var(--text-scale)); line-height:1.75; color:var(--frost); margin:12px 0 18px; }

  /* the AI-written reading: per-card note, then the complete reading in sections */
  .v-yours p{ font-size:calc(0.90625rem * var(--text-scale)); line-height:1.7; color:var(--bone); margin:0; }
  /* while the AI reading is being written: five runes (FREYA) light up in turn */
  .v-thinking-runes span{ opacity:.18; animation:cc-rune 2.2s ease-in-out infinite; }
  @keyframes cc-rune{ 0%,100%{ opacity:.18; transform:none; text-shadow:none; }
                      35%{ opacity:1; transform:translateY(-3px); text-shadow:0 0 14px rgba(var(--gold-light-rgb),.7); } }
  .v-thinking p{ font-family:var(--font-body); font-style:italic; font-size:calc(0.9375rem * var(--text-scale)); color:var(--bone); margin:0 0 6px; }
  .v-thinking small{ font-size:calc(0.75rem * var(--text-scale)); color:var(--frost); opacity:.6; }
  .v-row{ display:flex; align-items:baseline; gap:10px; width:100%; padding:8px 4px; background:none; border:0; border-bottom:1px solid rgba(var(--frost-rgb),.08);
    text-align:left; cursor:pointer; color:var(--frost); font-family:var(--font-body); font-size:calc(0.84375rem * var(--text-scale)); }
  .v-row .n{ font-family:var(--font-heading); color:var(--gold); width:18px; flex-shrink:0; }
  .v-row .p{ opacity:.6; width:110px; flex-shrink:0; }

  /* ---------- zoomed card (from the panel's thumbnail) ---------- */
  .cc-focus img, .cc-focus canvas{ width:100%; height:100%; object-fit:contain; display:block; }
  .cc-focus.reversed img, .cc-focus.reversed canvas{ transform:rotate(180deg); }

  /* ---------- narrower screens: stack board above panel ---------- */
  @media (max-width:1000px){
    .cc-layout{ display:block; height:auto; min-height:0; }
/* height is set by ccFit() from the board's scaled size */
  }
  @media (prefers-reduced-motion: reduce){
    .cc-slot.active.face-down .cc-tilt{ animation:none; }
    .cc-view.swap > *{ animation:none; }
    .v-thinking-runes span{ animation:none; opacity:.7; }
  }