/* =========================================================================
   THE AKASHI — the single, chat-driven surface.
   -------------------------------------------------------------------------
   This stylesheet does NOT replace the lens engine. It rides on top of the
   proven MythicaShell:
     • it HIDES the shell's destination furniture (the lens rail, the
       Librarian dock, the oracle's own in-frame sidebar) — in the Akashi
       there is no navigation, only the record answering;
     • it promotes ONE persistent element — Calliope's panel — to chrome
       that lives across every composition the canvas takes;
     • the canvas (the shell's #stage) runs full-bleed BEHIND the glass
       panel: "a chat sidebar and a starfield," the surface deceptively
       plain, everything structured beneath.
   ========================================================================= */

/* ---- silence the old navigation. There is no rail; there are no places. ---- */
#mythica-lens-root #switcher,
#mythica-lens-root #librarian-dock,
#mythica-lens-root #scope-badge { display: none !important; }

/* the oracle keeps its frame-field (the "field of answer") but loses its
   private sidebar — Calliope is chrome now, not a tenant of one lens */
#mythica-lens-root .oracle-side { display: none !important; }
#mythica-lens-root .oracle-stage { left: 0 !important; right: 0 !important; width: 100% !important; }

/* the wordmark recedes to a quiet sigil in the corner */
#mythica-lens-root #chrome { pointer-events: none; }
#mythica-lens-root .wordmark { opacity: 0.5; transform: scale(0.86); transform-origin: left center; }

/* ===================== bare rest: no World Tree at rest ===================== */
/* The resting composition is now just the starfield (#heavens). The cosmogram
   host — World Tree + its clickable region labels — is removed entirely; when
   Calliope has nothing to show, the canvas is a bare sky. */
#mythica-lens-root #cosmogram { display: none !important; }

/* ================= the Akashi owns its viewport (no page scroll) ============ */
/* This stylesheet is enqueued ONLY on [akashi] pages, so these page-level rules
   are inherently scoped to the Akashi and never touch the rest of the site.
   The instrument is pinned to the real viewport regardless of the theme header
   or Elementor wrapper — the page itself never scrolls. */
/* ⚠ THE PAGE STILL DOES NOT SCROLL — the instrument owns its viewport — but the
   header above it must remain reachable, so only the BODY is locked. */
html, body {
  overflow: hidden !important;
  height: 100% !important;
  margin: 0 !important;
}
/* ⚠ IT SITS UNDER THE MYTHICA HEADER, NOT OVER IT. This used to be `inset: 0`
   with `z-index: 1000`, and the comment beside it said "over the site header" —
   which is exactly what Peter reported: the Akashic Lens page had swallowed the
   site's own navigation, so the one page most likely to be somebody's first was
   the one page they could not leave.

   ⚠ AND THE HEIGHT IS MEASURED, NOT TYPED. The admin bar is 32px or 46px and
   the theme header is neither fixed nor predictable — a hardcoded number is
   right on one screen and wrong on the next. `--mythica-chrome-top` is written
   by shell.js from the real elements, and defaults to 0 so a page with no
   chrome at all still fills. */
#mythica-lens-root {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: var(--mythica-chrome-top, 0px) !important;
  width: 100vw !important;
  height: calc(100vh - var(--mythica-chrome-top, 0px)) !important;   /* fallback */
  height: calc(100dvh - var(--mythica-chrome-top, 0px)) !important;  /* honours mobile browser chrome */
  margin: 0 !important;
  background: #05070f !important;   /* clean deep-midnight behind the bare sky */
  z-index: 40 !important;           /* under the header and the admin bar, over the page */
}

/* ============================ Calliope's panel ============================ */

#akashi-panel {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: min(380px, 82vw);
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: 18px 16px 16px;
  box-sizing: border-box;
  color: #dbe4fb;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background:
    linear-gradient(105deg, rgba(9,14,32,0.90) 0%, rgba(10,16,38,0.74) 62%, rgba(10,16,38,0.0) 100%);
  -webkit-backdrop-filter: blur(9px) saturate(1.05);
  backdrop-filter: blur(9px) saturate(1.05);
  border-right: 1px solid rgba(140,170,235,0.10);
  transition: transform 620ms cubic-bezier(.22,.61,.36,1), opacity 500ms ease;
  will-change: transform;
}
/* folded: the panel withdraws; only the summoning bubble remains */
#mythica-lens-root.akashi-folded #akashi-panel {
  transform: translateX(-102%);
  opacity: 0;
  pointer-events: none;
}

/* the bottom-sheet grab handle — desktop hides it; the mobile @media shows it.
   Drag it to slide the sheet between peek / half / full; tap it to cycle up. */
.ak-sheet-handle {
  display: none; flex: 0 0 auto; place-items: center;
  height: 20px; margin: -4px 0 6px; cursor: grab; touch-action: none;
}
.ak-sheet-handle::before {
  content: ''; width: 44px; height: 5px; border-radius: 3px;
  background: rgba(200,214,255,0.34); transition: background .2s ease, width .2s ease;
}
.ak-sheet-handle:active { cursor: grabbing; }
.ak-sheet-handle:active::before { background: rgba(238,199,122,0.6); width: 54px; }

#akashi-head {
  display: flex; align-items: center; gap: 11px;
  padding-bottom: 12px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(140,170,235,0.12);
}
#akashi-head .ak-sigil {
  font-size: 22px; line-height: 1;
  color: #f2d79a;
  text-shadow: 0 0 14px rgba(238,199,122,0.55);
  animation: ak-breathe 6.5s ease-in-out infinite;
}
@keyframes ak-breathe { 0%,100%{ opacity:.72 } 50%{ opacity:1 } }
#akashi-head h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .01em; color: #eaf0ff; }
#akashi-head p  { margin: 2px 0 0; font-size: 11px; letter-spacing: .04em; color: #94a6d6; text-transform: uppercase; }
#akashi-head .ak-fold {
  margin-left: auto; pointer-events: auto;
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(140,170,235,0.08); border: 1px solid rgba(140,170,235,0.14);
  color: #b9c8f2; font-size: 15px; cursor: pointer;
  display: grid; place-items: center;
  transition: background 180ms ease;
}
#akashi-head .ak-fold:hover { background: rgba(140,170,235,0.16); }

/* the conversation log */
#akashi-log {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 10px;
  padding: 6px 4px 6px 0; margin: 8px 0;
  scrollbar-width: thin; scrollbar-color: rgba(140,170,235,0.3) transparent;
}
#akashi-log::-webkit-scrollbar { width: 6px; }
#akashi-log::-webkit-scrollbar-thumb { background: rgba(140,170,235,0.25); border-radius: 3px; }

.ak-msg {
  font-size: 13.5px; line-height: 1.5;
  max-width: 92%;
  padding: 9px 12px; border-radius: 13px;
  animation: ak-rise 420ms cubic-bezier(.22,.61,.36,1);
}
@keyframes ak-rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.ak-msg-calliope {
  align-self: flex-start;
  background: linear-gradient(180deg, rgba(30,40,74,0.72), rgba(22,30,58,0.62));
  border: 1px solid rgba(140,170,235,0.14);
  color: #e6ecff;
  border-bottom-left-radius: 4px;
}
.ak-msg-visitor {
  align-self: flex-end;
  background: linear-gradient(180deg, rgba(120,92,44,0.42), rgba(96,72,36,0.36));
  border: 1px solid rgba(238,199,122,0.22);
  color: #f6ecd4;
  border-bottom-right-radius: 4px;
}
.ak-typing { display: inline-flex; gap: 4px; align-items: center; }
.ak-typing span {
  width: 5px; height: 5px; border-radius: 50%;
  background: #9fb3e6; opacity: .5;
  animation: ak-blink 1.1s infinite ease-in-out;
}
.ak-typing span:nth-child(2){ animation-delay: .18s; }
.ak-typing span:nth-child(3){ animation-delay: .36s; }
@keyframes ak-blink { 0%,100%{ opacity:.28; transform: translateY(0); } 50%{ opacity:.9; transform: translateY(-2px);} }

/* guided moves — the offered next steps. She leads; you choose. */
#akashi-moves {
  display: flex; flex-direction: column; gap: 7px;
  padding: 4px 2px 10px 0;
}
#akashi-moves .ak-moves-cap {
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: #7f92c4; margin: 2px 0 3px;
}
.ak-move {
  text-align: left; cursor: pointer;
  padding: 9px 12px; border-radius: 11px;
  font-size: 13px; line-height: 1.35;
  color: #dbe4fb;
  background: rgba(140,170,235,0.06);
  border: 1px solid rgba(140,170,235,0.13);
  transition: background 170ms ease, border-color 170ms ease, transform 170ms ease;
}
.ak-move:hover { background: rgba(140,170,235,0.14); border-color: rgba(238,199,122,0.30); transform: translateX(2px); }
.ak-move .ak-move-glyph { color: #f2d79a; margin-right: 7px; opacity: .85; }
.ak-move.ak-move-rest { color: #a9b7dd; border-style: dashed; }
.ak-move.is-active { background: rgba(238,199,122,0.14); border-color: rgba(238,199,122,0.45); color: #f6e6bd; }

/* Our chips (Tutorial/Characters/Map) replace Meow's suggested-prompt starters —
   hide the AI-Engine / Quick-Actions suggestion pills inside the docked Akashi so
   there is ONE guided system. Scoped to the panel; the definitive global kill is
   deactivating the "Quick Actions (AI Engine)" plugin. */
#akashi-panel .mwai-quick-actions,
#akashi-panel .mwai-suggestions,
#akashi-panel .mwai-shortcuts,
#akashi-panel .mwai-blocks,
#akashi-panel [class*="quick-action"],
#akashi-panel [class*="suggestion"] { display: none !important; }
.ak-move.is-active .ak-move-glyph { opacity: 1; }
.ak-move[disabled] { opacity: .4; pointer-events: none; }

/* the free tongue */
#akashi-form { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(140,170,235,0.12); }
#akashi-input {
  flex: 1 1 auto; min-width: 0;
  padding: 10px 13px; border-radius: 11px;
  background: rgba(6,10,24,0.6); border: 1px solid rgba(140,170,235,0.16);
  color: #eaf0ff; font-size: 13.5px; outline: none;
  transition: border-color 160ms ease;
}
#akashi-input::placeholder { color: #6f82b4; }
#akashi-input:focus { border-color: rgba(238,199,122,0.4); }
#akashi-send {
  flex: 0 0 auto; width: 42px; border-radius: 11px; cursor: pointer;
  background: linear-gradient(180deg, rgba(238,199,122,0.9), rgba(206,158,86,0.85));
  border: none; color: #22160a; font-size: 16px;
}
#akashi-send:hover { filter: brightness(1.08); }

/* the summoning bubble — how she is called back when folded */
#akashi-bubble {
  position: absolute; left: 16px; bottom: 18px; z-index: 41;
  width: 54px; height: 54px; border-radius: 50%;
  display: none; place-items: center; cursor: pointer;
  background: radial-gradient(circle at 40% 35%, rgba(60,80,150,0.95), rgba(14,20,44,0.95));
  border: 1px solid rgba(238,199,122,0.3);
  box-shadow: 0 6px 26px rgba(0,0,0,0.45), 0 0 24px rgba(238,199,122,0.18);
  color: #f2d79a; font-size: 23px;
  animation: ak-breathe 6.5s ease-in-out infinite;
}
#mythica-lens-root.akashi-folded #akashi-bubble { display: grid; }

/* ===================== live: the docked AI Engine chatbot ================ */
/* When the real Calliope (window.MwaiAPI) is present, her chatbot container is
   relocated into #akashi-dock and the scripted log/input are removed. She
   should fill the panel body between the header and the offered moves. */
#akashi-dock { flex: 1 1 auto; min-height: 0; display: flex; margin: 8px 0; }
#akashi-dock:empty { display: none; }
#akashi-dock .mwai-chatbot-container.akashi-docked,
#akashi-dock .akashi-docked { flex: 1 1 auto; min-width: 0; }
/* the docked chatbot is inline, not a floating window — neutralise the
   popup's fixed positioning / trigger bubble so it lives in the panel */
#akashi-dock .mwai-chat.mwai-window { position: static !important; inset: auto !important; }
#akashi-dock .mwai-trigger, #akashi-dock .mwai-open-button { display: none !important; }
#akashi-dock .mwai-window-box {
  position: static !important; width: 100% !important; height: 100% !important;
  max-width: none !important; max-height: none !important;
  box-shadow: none !important; border: none !important; background: transparent !important;
}
/* in live mode the panel needs a little more room for a real conversation */
#mythica-lens-root #akashi-panel.akashi-live { width: min(420px, 88vw); }

/* the docked chat should FILL the panel body, not sit as a small box */
#akashi-dock .mwai-chatbot-container,
#akashi-dock .mwai-chat,
#akashi-dock .mwai-window,
#akashi-dock .mwai-window-box,
#akashi-dock .mwai-body,
#akashi-dock .mwai-conversation {
  height: 100% !important; max-height: none !important;
  flex: 1 1 auto !important; display: flex !important; flex-direction: column !important;
  min-height: 0 !important;
}
#akashi-dock .mwai-body, #akashi-dock .mwai-conversation { overflow-y: auto !important; }

/* On the Akashi page the FLOATING bubble is redundant — Calliope lives in the
   panel. Hide the popup-window instance; the docked inline chat (window off,
   so no .mwai-window class) survives. */
.mwai-window:not(#akashi-dock *) { display: none !important; }

@media (max-width: 620px) {
  #akashi-panel {
    top: auto; bottom: 0; left: 0; right: 0; width: 100%;
    height: 62dvh;   /* the draggable sheet; JS sets this per snap (peek/half/full) */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(0deg, rgba(9,14,32,0.94) 0%, rgba(10,16,38,0.82) 70%, rgba(10,16,38,0.0) 100%);
    border-right: none; border-top: 1px solid rgba(140,170,235,0.12);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 50px rgba(0,0,0,0.4);
    transition: height 400ms cubic-bezier(.22,.61,.36,1), transform 620ms cubic-bezier(.22,.61,.36,1), opacity 500ms ease;
    touch-action: pan-y;
  }
  #mythica-lens-root.akashi-folded #akashi-panel { transform: translateY(102%); }
  #akashi-panel .ak-sheet-handle { display: grid; }
  /* the chat area flexes, so the header stays pinned up top and the input at the
     bottom at every snap height */
  #akashi-log, #akashi-dock { flex: 1 1 auto; min-height: 0; }
}

/* ============================ the card fixed-draw ========================= */
/* A named card, pulled from the deck and shown over the starfield. Centred in
   the free area beside Calliope's panel; a soft scrim so the face reads, but
   the canvas beneath is never destroyed. */
#akashi-card-draw {
  position: absolute; inset: 0; left: min(380px, 82vw); z-index: 45;
  display: flex; align-items: center; justify-content: center;
  padding: 4vh 4vw; pointer-events: none; opacity: 0; overflow: visible;
  background: radial-gradient(60% 60% at 50% 45%, rgba(5,7,15,0.55), rgba(5,7,15,0.0) 78%);
  transition: opacity 420ms ease;
}
#akashi-card-draw.shown { opacity: 1; pointer-events: auto; }
/* the spread: one card centred, or several wrapping/scrolling */
/* overflow VISIBLE, not auto. The spread used to be a scroll box, so a card
   dragged past its edge was sliced in half by an invisible frame. Cards are
   draggable now — arranging them is the point, so nothing may clip them. */
#akashi-card-spread {
  display: flex; gap: 20px; align-items: center; justify-content: center;
  flex-wrap: wrap; max-width: 100%; overflow: visible;
  padding: 6px;
}
#akashi-card-draw.akc-multi .akc-card { width: min(230px, 60vw); }
#akashi-card-draw.akc-multi .akc-name { font-size: 17px; }
#akashi-card-draw.akc-multi .akc-meaning { font-size: 12.5px; margin-top: 8px; }
#akashi-card-draw .akc-close {
  position: absolute; top: 16px; right: 18px; width: 36px; height: 36px;
  border-radius: 50%; cursor: pointer;
  background: rgba(14,20,44,0.7); border: 1px solid rgba(238,199,122,0.28);
  color: #e6ddc4; font-size: 15px; line-height: 1;
}
#akashi-card-draw .akc-close:hover { background: rgba(30,40,74,0.85); }
#akashi-card-draw .akc-card {
  margin: 0; max-width: 340px; width: min(340px, 76vw);
  display: flex; flex-direction: column;
  background: linear-gradient(168deg, rgba(20,27,61,0.94), rgba(11,17,38,0.96));
  border: 1.5px solid #e8c47a; border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,0.6), 0 0 34px rgba(240,212,147,0.18);
  transform: translateY(14px) scale(0.97);
  transition: transform 520ms cubic-bezier(.2,.7,.25,1);
}
#akashi-card-draw.shown .akc-card { transform: none; }
/* ---- draggable cards ------------------------------------------------------
   The spread can be pulled apart. `touch-action: none` is what lets a finger
   drag a card instead of the browser scrolling the spread — a deliberate trade:
   with only a few cards in a draw, arranging them matters more than scrolling
   past them, and the backdrop and ✕ both still close. `will-change` keeps the
   drag on the compositor; the transition is dropped mid-drag (see akashi.js)
   so the card tracks the pointer instead of easing behind it. */
#akashi-card-draw .akc-card { cursor: grab; touch-action: none; }
#akashi-card-draw .akc-card.akc-dragging {
  cursor: grabbing; transition: none !important; will-change: transform;
  box-shadow: 0 34px 90px rgba(0,0,0,0.72), 0 0 44px rgba(240,212,147,0.28);
}
#akashi-card-draw .akc-card a,
#akashi-card-draw .akc-card button { cursor: pointer; }
#akashi-card-draw .akc-face {
  aspect-ratio: 3 / 4; width: 100%;
  background-size: cover; background-position: center;
  background-color: #0b1126; border-bottom: 1px solid rgba(240,212,147,0.22);
}
#akashi-card-draw .akc-face.akc-noimg {
  display: grid; place-items: center; font-size: 64px; color: rgba(240,212,147,0.5);
}
#akashi-card-draw .akc-body { padding: 15px 17px 17px; }
#akashi-card-draw .akc-deck {
  font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase;
  color: #e8c47a; margin-bottom: 5px;
}
#akashi-card-draw .akc-name {
  font-family: "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 21px; color: #eef2ff; line-height: 1.15;
}
#akashi-card-draw .akc-meta {
  margin-top: 5px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #94a6d6;
}
#akashi-card-draw .akc-meaning {
  margin-top: 11px; font-family: "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 14px; line-height: 1.6; color: #d6ddf4; font-style: italic;
}
#akashi-card-draw .akc-link {
  display: inline-block; margin-top: 13px; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: #e8c47a; text-decoration: none;
}
#akashi-card-draw .akc-link:hover { color: #f2d79a; }

@media (max-width: 620px) {
  /* panel is bottom-docked on mobile — centre the card in the upper canvas */
  #akashi-card-draw { left: 0; align-items: flex-start; padding-top: 8vh; }
  #akashi-card-draw .akc-card { width: min(300px, 82vw); }
  #akashi-card-draw .akc-name { font-size: 19px; }
}

/* ======================= the aka-constellation draw ======================= */
/* A named aka figure drawn as a constellation of its quality-stars, over the
   starfield. THE SIGHT: the figure's face dims to reveal the star-pattern. */
#akashi-aka-draw {
  position: absolute; inset: 0; left: min(380px, 82vw); z-index: 45;
  display: flex; align-items: center; justify-content: center;
  padding: 4vh 4vw; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 60% at 50% 45%, rgba(5,7,15,0.6), rgba(5,7,15,0) 78%);
  transition: opacity 420ms ease;
}
#akashi-aka-draw.shown { opacity: 1; pointer-events: auto; }
#akashi-aka-draw .aka-close {
  position: absolute; top: 16px; right: 18px; width: 36px; height: 36px;
  border-radius: 50%; cursor: pointer;
  background: rgba(14,20,44,0.7); border: 1px solid rgba(238,199,122,0.28);
  color: #e6ddc4; font-size: 15px;
}
#akashi-aka-draw .aka-card {
  margin: 0; width: min(360px, 78vw); display: flex; flex-direction: column;
  background: linear-gradient(168deg, rgba(20,27,61,0.94), rgba(11,17,38,0.96));
  border: 1.5px solid #e8c47a; border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,0.6), 0 0 40px rgba(240,212,147,0.2);
  transform: translateY(14px) scale(0.97); transition: transform 520ms cubic-bezier(.2,.7,.25,1);
}
#akashi-aka-draw.shown .aka-card { transform: none; }
/* the stage holds the face and the constellation, stacked */
#akashi-aka-draw .aka-stage { position: relative; aspect-ratio: 1 / 1; width: 100%; background: #0b1126; }
#akashi-aka-draw .aka-face {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: opacity 700ms ease, filter 700ms ease;
}
#akashi-aka-draw .aka-face.aka-noimg {
  display: grid; place-items: center; font-size: 60px; color: rgba(240,212,147,0.35);
}
#akashi-aka-draw .aka-constellation {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0.28; transition: opacity 700ms ease;
}
#akashi-aka-draw .aka-lines line { stroke: rgba(240,212,147,0.5); stroke-width: 0.5; }
#akashi-aka-draw .aka-dots circle { fill: #fdf3d0; }
#akashi-aka-draw .aka-labels text {
  fill: rgba(230,221,196,0.9); font-family: "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 3.4px; letter-spacing: 0.02em; opacity: 0; transition: opacity 700ms ease;
}
/* THE SIGHT — dim the face, brighten the stars, reveal the quality-names */
#akashi-aka-draw.sight-open .aka-face { opacity: 0.14; filter: saturate(0.5) blur(1px); }
#akashi-aka-draw.sight-open .aka-constellation { opacity: 1; }
#akashi-aka-draw.sight-open .aka-labels text { opacity: 1; }
#akashi-aka-draw .aka-body { padding: 15px 17px 17px; }
#akashi-aka-draw .aka-system {
  font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase; color: #e8c47a; margin-bottom: 5px;
}
#akashi-aka-draw .aka-name {
  font-family: "Palatino Linotype", Palatino, Georgia, serif; font-size: 22px; color: #eef2ff; line-height: 1.12;
}
#akashi-aka-draw .aka-meaning {
  margin-top: 10px; font-family: "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 14px; line-height: 1.6; color: #d6ddf4; font-style: italic;
}
#akashi-aka-draw .aka-sight {
  margin-top: 13px; padding: 8px 14px; border-radius: 10px; cursor: pointer;
  background: rgba(240,212,147,0.08); border: 1px solid rgba(238,199,122,0.3);
  color: #e8c47a; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
}
#akashi-aka-draw .aka-sight:hover { background: rgba(240,212,147,0.16); }
#akashi-aka-draw.sight-open .aka-sight::after { content: " ✦"; }
@media (max-width: 620px) {
  #akashi-aka-draw { left: 0; align-items: flex-start; padding-top: 8vh; }
  #akashi-aka-draw .aka-card { width: min(320px, 84vw); }
}

/* ============================ the imagine / vision plane ============================ */
/* "imagine …" → an AI-drawn image blended into the field (radial feather + screen). */
/* The overlay spans the field but PASSES CLICKS THROUGH — only the plane is
   interactive (so the field behind stays live and the plane can be dragged). */
#akashi-vision-draw {
  position: absolute; inset: 0; left: min(380px, 82vw); z-index: 46;
  pointer-events: none; opacity: 0; transition: opacity 600ms ease;
}
#akashi-vision-draw.shown { opacity: 1; }
#akashi-vision-draw .viz-plane {
  position: absolute; pointer-events: auto; margin: 0; cursor: grab; touch-action: none;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
#akashi-vision-draw .viz-plane.dragging { cursor: grabbing; }
#akashi-vision-draw .viz-tools { display: flex; gap: 10px; pointer-events: auto; }
#akashi-vision-draw .viz-dl,
#akashi-vision-draw .viz-close {
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  background: rgba(10,16,32,0.72); color: #cdd8f5; border: 1px solid rgba(140,170,235,0.28);
  font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
#akashi-vision-draw .viz-dl:hover,
#akashi-vision-draw .viz-close:hover { border-color: rgba(240,212,147,0.6); color: #f6dfa4; }
/* A PHOTOGRAPH IS A PHOTOGRAPH.
   Every raised image used to be cropped to a disc, feathered at the edge and
   screen-blended into the field. That treatment was authored for generated art
   — light-on-dark by construction, and improved by dissolving into mist. Applied
   to the record's own photographs it did three things wrong at once: screen
   threw away every tone darker than the background, the disc cropped a group of
   eight people down to whoever stood in the middle, and the feather ate the rest.
   So the default is now the picture itself: its real aspect ratio, a hairline
   gold edge, and a shadow that lifts it off the field. The disc-and-dissolve is
   kept for the one input it was designed for. */
#akashi-vision-draw .viz-img {
  max-width: min(64vw, 900px); max-height: 74vh;
  width: auto; height: auto; object-fit: contain;
  border-radius: 4px;
  border: 1px solid rgba(232, 196, 122, 0.35);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
  mix-blend-mode: normal;
  -webkit-mask-image: none; mask-image: none;
  filter: none;
  animation: viz-rise 1.3s ease both; -webkit-user-drag: none; user-select: none;
}
@keyframes viz-rise { from { transform: scale(.94); } to { transform: scale(1); } }

/* GENERATED ART — "imagine …". The disc, the feather and the screen blend, kept
   whole: this is the input they were made for, and it is the only one. */
#akashi-vision-draw.viz-generated .viz-img {
  width: min(52vh, 58vw); height: min(52vh, 58vw);
  max-width: none; max-height: none; object-fit: cover;
  border-radius: 50%; border: 0; box-shadow: none;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(circle at 50% 48%, #000 42%, rgba(0,0,0,0) 72%);
  mask-image: radial-gradient(circle at 50% 48%, #000 42%, rgba(0,0,0,0) 72%);
  filter: saturate(1.05) contrast(1.02);
}

/* One media-fade policy: any image/video landing on the compositor eases in
   only once it can actually paint (load / loadeddata), never popping. */
.media-fade { opacity: 0; transition: opacity 1.15s ease; }
.media-fade.media-in { opacity: 1; }
#akashi-vision-draw .viz-cap {
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic;
  font-size: 15px; color: #dfe7fb; max-width: 60vh; text-align: center;
  text-shadow: 0 1px 12px rgba(0,0,0,0.8);
}
#akashi-vision-draw .viz-status {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%);
  pointer-events: auto;
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic;
  font-size: 16px; color: #cdd8f5; text-align: center; max-width: 60vh;
  padding: 18px 22px; border-radius: 16px;
  background: rgba(10,16,32,0.5); border: 1px solid rgba(140,170,235,0.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
#akashi-vision-draw .viz-status .viz-close {
  vertical-align: middle; margin-left: 10px; width: 30px; height: 30px;
}

/* ==================== the compass, as an aspect of the field ==================== */
/* The Akashic Compass is INVOKE-ONLY — the sigil no longer sits in the field.
   It stays present (laid out, so the plugin still initialises) but INVISIBLE and
   non-interactive; the panel's "Consult the Compass" button triggers its
   invocation, which opens the plugin's own body-level lightbox. The cast fires
   `mythica:reading`, which drapes the mist + weaves the reading below. On/off:
   summon to read, close to return — nothing rendered at rest. */
#akashi-compass {
  position: absolute; right: 3vw; top: 14vh; z-index: 30;
  width: min(168px, 22vw);
  opacity: 0 !important; pointer-events: none !important;
}
#akashi-compass img, #akashi-compass canvas { width: 100%; height: auto; display: block; border-radius: 10px; }
#akashi-compass .akashic-compass-loading { min-height: 96px !important; }
@media (max-width: 720px){ #akashi-compass{ width: 120px; right: 4vw; top: 10vh; } }

/* the woven reading from a cast — low in the field, over the mist */
#akashi-reading {
  position: absolute; left: calc(min(380px,82vw) + 4vw); right: 4vw; bottom: 6vh; z-index: 31;
  max-width: 720px; margin: 0 auto; text-align: center; pointer-events: none;
  font-family: "Cormorant Garamond", Georgia, serif; font-size: 17px; line-height: 1.5;
  color: #eef2ff; text-shadow: 0 2px 16px rgba(0,0,0,0.85);
  opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease;
}
#akashi-reading.shown { opacity: 1; transform: translateY(0); }
@media (max-width: 720px){ #akashi-reading{ left: 4vw; right: 4vw; bottom: 24vh; } }

/* invocation, transparent — the astrolabe floats in the mist, no box behind it */
#akashi-compass .akc-invoke,
#akashi-compass .akc-invoke-root,
#akashi-compass .akashic-compass-invocation,
#akashi-compass .akashic-compass-loading {
  background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important;
}
#akashi-compass .akc-invoke-label { display: none !important; } /* the panel button carries the label */
#akashi-compass .akc-invoke-img { border-radius: 12px; filter: drop-shadow(0 6px 22px rgba(0,0,0,0.45)); }

/* the panel summon — a gold affordance near the chat */
#akashi-compass-summon {
  margin: 2px 2px 10px 0; padding: 9px 12px; border-radius: 11px; cursor: pointer;
  text-align: left; font-size: 13px; letter-spacing: .02em; color: #f2d79a;
  background: rgba(238,199,122,0.08); border: 1px solid rgba(238,199,122,0.24);
  transition: background 170ms ease, border-color 170ms ease, transform 170ms ease;
}
#akashi-compass-summon:hover { background: rgba(238,199,122,0.16); border-color: rgba(238,199,122,0.45); transform: translateX(2px); }

/* the mist recedes when a figure/thread aspect comes up (characters + the curving
   geometry carry the eye), and returns at rest. */
#mist { transition: opacity 1.1s ease; }
#mythica-lens-root.mist-recede #mist { opacity: 0.16; }

/* --------------------------- the Mythipedia codex ---------------------------
   A definition surfaced beside the concept's media bloom: a readable prose card,
   above the vision plane (z 45) so the text stays legible over the art. */
#akashi-entry {
  position: absolute; z-index: 48; right: 3vw; top: 50%;
  transform: translateY(-50%); pointer-events: none;
  max-width: min(420px, 44vw); opacity: 0; transition: opacity 900ms ease;
}
#akashi-entry.shown { opacity: 1; pointer-events: auto; }
#akashi-entry .ent-card {
  position: relative; padding: 22px 24px 20px;
  background: linear-gradient(168deg, rgba(17,23,52,0.93), rgba(9,13,32,0.95));
  border: 1px solid rgba(238,199,122,0.34); border-radius: 16px;
  box-shadow: 0 22px 66px rgba(0,0,0,0.6), 0 0 30px rgba(240,212,147,0.12);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  max-height: 74vh; overflow: auto;
  scrollbar-width: thin; scrollbar-color: rgba(240,212,147,0.3) transparent;
}
#akashi-entry .ent-close {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px;
  border-radius: 50%; cursor: pointer; line-height: 1; font-size: 13px;
  background: rgba(14,20,44,0.7); border: 1px solid rgba(238,199,122,0.28); color: #e6ddc4;
}
#akashi-entry .ent-close:hover { background: rgba(30,40,74,0.85); }
#akashi-entry .ent-head { margin: 0 26px 10px 0; }
#akashi-entry .ent-title {
  margin: 0; font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 27px; line-height: 1.1; color: #f4e6c2; letter-spacing: 0.2px;
}
#akashi-entry .ent-bind {
  margin-top: 5px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(224,231,251,0.5);
}
#akashi-entry .ent-bind span { color: #e8c47a; }
#akashi-entry .ent-gloss {
  margin: 0 0 12px; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic;
  font-size: 16px; color: #dfe7fb; opacity: 0.92;
}
#akashi-entry .ent-body { font-size: 14px; line-height: 1.62; color: #d7ddf0; }
#akashi-entry .ent-body p { margin: 0 0 0.85em; }
#akashi-entry .ent-body a { color: #f2d79a; text-decoration: none; border-bottom: 1px solid rgba(242,215,154,0.3); }
@media (max-width: 640px) {
  #akashi-entry { right: 0; left: 0; margin: 0 auto; top: auto; bottom: 3vh; transform: none; max-width: 92vw; }
  #akashi-entry .ent-card { max-height: 52vh; }
}


/* ---------------------------------------------------------------------------
   THE CARD TURNS.
   The front carries the image and the name; the meaning waits on the back
   until asked for. A three-card draw used to print all three meanings at once,
   which is a wall of prose before anyone has chosen to read any of it.
   ------------------------------------------------------------------------ */
#akashi-card-draw .akc-card {
  position: relative; transform-style: preserve-3d;
  background: none !important; border: 0 !important; box-shadow: none !important;
  overflow: visible;
}
#akashi-card-draw .akc-card.akc-has-back { cursor: pointer; }
/* the rotation itself is written inline by applyCardTransform() so it can
   compose with a drag offset; this only owns the timing. */
#akashi-card-draw .akc-card { transition: transform 520ms cubic-bezier(.2,.7,.25,1); }
#akashi-card-draw .akc-card.akc-dragging { transition: none !important; }

#akashi-card-draw .akc-side {
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(168deg, rgba(20,27,61,0.94), rgba(11,17,38,0.96));
  border: 1.5px solid #e8c47a;
  box-shadow: 0 24px 70px rgba(0,0,0,0.6), 0 0 34px rgba(240,212,147,0.18);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
#akashi-card-draw .akc-front { position: relative; }
#akashi-card-draw .akc-back {
  position: absolute; inset: 0; transform: rotateY(180deg);
  padding: 20px 18px; overflow-y: auto; overscroll-behavior: contain; text-align: left;
}
#akashi-card-draw .akc-front .akc-name { padding: 12px 14px 14px; }
#akashi-card-draw .akc-back .akc-name { margin-bottom: 4px; }
#akashi-card-draw .akc-back .akc-meaning { margin-top: 10px; }
#akashi-card-draw .akc-back::-webkit-scrollbar { width: 6px; }
#akashi-card-draw .akc-back::-webkit-scrollbar-thumb {
  background: rgba(240,212,147,0.3); border-radius: 4px;
}
/* the invitation, only where there is a back to reach */
#akashi-card-draw .akc-card.akc-has-back .akc-front::after {
  content: "turn"; position: absolute; right: 10px; bottom: 10px;
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(240,212,147,0.5); pointer-events: none;
  transition: opacity .3s ease;
}
#akashi-card-draw .akc-card.is-turned .akc-front::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  #akashi-card-draw .akc-card { transition: none; }
}


/* ---------------------------------------------------------------------------
   THE WHOLE CARD.
   The face was a background-image at `cover`, which crops to fill its box —
   on a deck that isn't 3:4 that sliced the card's own border and printed name
   away. An <img> carries its own proportions, so any deck (and any term face)
   shows complete. The card sizes to the art rather than the art to the card.
   ------------------------------------------------------------------------ */
#akashi-card-draw .akc-face-img {
  display: block; width: 100%; height: auto;
  max-height: 72vh; object-fit: contain;
  border-radius: 14px 14px 0 0; background: rgba(6,9,20,0.5);
}
/* single draw: let it breathe; a spread: smaller, so three fit side by side */
#akashi-card-draw .akc-card { width: min(400px, 84vw); max-width: none; }
#akashi-card-draw.akc-multi .akc-card { width: min(260px, 62vw); }
#akashi-card-draw.akc-multi .akc-face-img { max-height: 56vh; }
/* the placeholder keeps a card's shape when there is no art to measure */
#akashi-card-draw .akc-face.akc-noimg { aspect-ratio: 2 / 3; }
/* the name sits under the art, not over it */
#akashi-card-draw .akc-front .akc-name {
  padding: 11px 14px 13px; background: rgba(11,17,38,0.96);
}

/* ---- WHY NOTHING HAPPENED ------------------------------------------------
   A refusal is information, not an emergency: one quiet line at the foot of
   the panel, gone in a few seconds. It exists because "the canvas did not
   move" used to mean three different things — no compositor, no such scene,
   or not enough record to draw — and looked identical in all three. */
#akashi-panel .ak-note{
  margin:8px 12px 10px; padding:7px 10px;
  border-left:1px solid rgba(232,196,122,.45);
  background:rgba(9,14,32,.5);
  color:rgba(216,201,184,.72);
  font-family:Cormorant,Georgia,serif; font-size:12px; font-style:italic;
  line-height:1.45; opacity:0; max-height:0; overflow:hidden;
  transition:opacity .25s ease, max-height .25s ease;
}
#akashi-panel .ak-note.is-on{ opacity:1; max-height:120px; }