/* ---------- page layout: board | panel (same as the Celtic Cross) ---------- */
  .pl-layout{ display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,420px); gap:24px;
    max-width:1500px; margin:0 auto; height:calc(100vh - var(--pl-top, 90px) - 18px); min-height:480px; }
  /* Not zoomed with a CSS scale: plFit() 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). */
  .pl-board{ position:absolute; left:0; top:0; --s:1; --cw:140px; --ch:210px; }

  /* ---------- board / deck / cards ---------- */
  .pl-deck .pl-back canvas{ width:100%; height:100%; display:block; }

  .pl-slot{ position:absolute; width:var(--cw); height:var(--ch);
    transition:transform .62s cubic-bezier(.18,.72,.24,1), opacity .3s ease; }
  .pl-slot.hoverable:hover .pl-card{ transform:scale(1.12) translateY(-10px); transition:transform .22s cubic-bezier(.2,.8,.3,1); }

  /* the position name sits above its card, outside the card's box, so cards line up with their outlines */
  .pl-poslabel{ position:absolute; left:50%; bottom:100%; transform:translateX(-50%); margin-bottom:calc(6px * var(--s));
    font-family:var(--font-body); font-size:max(9px, calc(10px * var(--s))); letter-spacing:.06em; text-transform:uppercase;
    color:var(--gold); opacity:.6; text-align:center; white-space:nowrap; transition:opacity .3s ease; }

  /* Year Ahead: the theme card between the two rows of months is drawn larger and covers the deck once dealt */
  .pl-slot.is-centre, .pl-ghost.is-centre{ --cw:var(--cwc); --ch:var(--chc); }
  .pl-year.dealt .pl-deck{ opacity:0; }

  /* the position being read: lifted above its neighbours and ringed in gold */
  .pl-slot.active.face-down .pl-tilt{ animation:pl-glow 1.8s ease-in-out infinite; }
  @keyframes pl-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); }
  }

  .pl-face canvas{ width:100%; height:100%; display:block; }
  .pl-back-face{ background:var(--midnight-2); }
  .pl-card.reversed .pl-front canvas{ transform:rotate(180deg); }

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

  .pl-ghost small{ position:absolute; left:50%; bottom:100%; transform:translateX(-50%); margin-bottom:calc(6px * var(--s));
    font-family:var(--font-body); font-size:max(9px, calc(10px * var(--s))); white-space:nowrap;
    letter-spacing:.06em; text-transform:uppercase; color:rgba(var(--gold-rgb),.7); }
  .pl-board.dealt .pl-deck{ opacity:.25; }

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

  .pl-strip[hidden]{ display:none; }
  .pl-chip{ min-width:30px; height:30px; padding:0 8px; 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; }
  .pl-single .pl-view{ margin-top:16px; }

  .pl-view.swap > *{ animation:pl-in .35s ease both; }
  @keyframes pl-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 canvas{ width:100%; height:100%; display:block; }
  .v-thumb.reversed canvas, .v-thumb.reversed .pl-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; }
  .v-ai-advice li{ margin-bottom:6px; }
  /* while the AI reading is being written: five runes (FREYA) light up in turn */
  .v-thinking-runes span{ opacity:.18; animation:pl-rune 2.2s ease-in-out infinite; }
  @keyframes pl-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; }

  .pl-actions[hidden]{ display:none; }
  .pl-single .pl-foot{ padding-top:12px; border-top:1px solid rgba(var(--frost-rgb),.12); justify-content:flex-end; }

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

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