/* A deliberately single-world design: the board is a reading table under
     lamplight, and it stays that way on any host theme. Every colour is
     therefore declared explicitly, including the body ground. Palette is
     MeowTarot's own brand system (plum #3d1a5c, gold #d49a2c), darkened. */
  :root {
    --ground:     #17102a;
    --surface:    #1f1638;
    --surface-2:  #2a1f49;
    --ink:        #f2ecfb;
    --muted:      #a695c4;
    --faint:      #6d5f8d;
    --gold:       #d49a2c;
    --gold-soft:  #e8c77a;
    --edge:       rgba(212, 154, 44, 0.22);
    --edge-soft:  rgba(212, 154, 44, 0.10);
    --plum-lift:  #3d1a5c;

    --slot-w: 96px;
    --radius: 10px;
    /* Thai comes from the platform: LINE's webview has a Thai UI face on both
       iOS and Android, so no 143 KB inlined font. Swap in a subset woff2 here if
       the brand ever needs one specific face. */
    --font-thai: 'Noto Sans Thai', 'IBM Plex Sans Thai', -apple-system, 'Helvetica Neue', system-ui, sans-serif;
    --font-mark: Georgia, 'Times New Roman', serif;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font-thai);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
  }

  .board {
    max-width: 430px;
    margin: 0 auto;
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto minmax(min-content, 1fr) auto auto auto auto;
    background: linear-gradient(180deg, var(--surface) 0%, var(--ground) 42%);
  }

  /* ---------------------------------------------------------- session bar */
  .bar {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 8px;
    padding: 14px 12px 12px;
    border-bottom: 1px solid var(--edge-soft);
  }

  /* Deck plate + bottom sheet mirror the site's deck switcher (js/deck-switcher.js,
     css/deck-switcher.css) down to the mt-ds-* class names, so the real build can
     lift that CSS instead of growing a second pattern. Colours are re-tuned for
     the dark board. */
  .back-btn {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid var(--edge);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
  }
  .back-btn[hidden] { display: none; }
  .back-btn svg { width: 15px; height: 15px; stroke: var(--gold); fill: none; stroke-width: 2.2; }
  .back-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  .unlock-hint { margin: 0; font-size: 11px; text-align: center; }
  .unlock-hint[hidden] { display: none; }
  .unlock-hint a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 2px; }
  .unlock-hint a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  .mt-ds-plate {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 5px 9px 5px 5px;
    background: var(--surface-2);
    border: 1px solid var(--edge);
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    transition: transform .16s ease;
  }
  .mt-ds-plate:active { transform: scale(.97); }
  /* the deck is locked in for the round once cards are on the table -- swapping
     art mid-reading would change the cards the ลูกดวง already touched */
  .mt-ds-plate[disabled] { opacity: .55; cursor: default; }
  .mt-ds-plate[disabled]:active { transform: none; }
  .mt-ds-plate[disabled] .mt-ds-plate__caret { visibility: hidden; }
  .mt-ds-plate:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .mt-ds-plate__preview { width: 24px; flex: 0 0 auto; border-radius: 5px; overflow: hidden; line-height: 0; }
  .mt-ds-plate__preview img { width: 100%; aspect-ratio: var(--back-ratio, .6); object-fit: cover; display: block; }
  .mt-ds-plate__text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
  .mt-ds-plate__label { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
  .mt-ds-plate__name { font-size: 13px; font-weight: 600; color: var(--gold-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mt-ds-plate__caret svg { width: 12px; height: 12px; stroke: var(--gold); fill: none; stroke-width: 3; }

  .mt-ds-overlay { position: fixed; inset: 0; z-index: 18; }
  .mt-ds-overlay[hidden] { display: none; }
  .mt-ds-scrim { position: absolute; inset: 0; background: rgba(10, 6, 18, .72); }
  .mt-ds-sheet {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(430px, 100%);
    max-height: 78vh;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 16px 22px;
    background: var(--surface);
    border: 1px solid var(--edge);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
  }
  .mt-ds-grabber { width: 38px; height: 4px; border-radius: 99px; background: var(--edge); margin: 2px auto 4px; }
  .mt-ds-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .mt-ds-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
  .mt-ds-close { background: transparent; border: 0; cursor: pointer; padding: 4px; line-height: 0; }
  .mt-ds-close svg { width: 14px; height: 14px; stroke: var(--muted); stroke-width: 2.6; stroke-linecap: round; }
  .mt-ds-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .mt-ds-hint { margin: 0; font-size: 11px; color: var(--faint); }
  .mt-ds-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; overflow-y: auto; padding-bottom: 4px; }

  .mt-ds-cell { background: transparent; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; gap: 6px; text-align: center; }
  .mt-ds-cell:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 12px; }
  .mt-ds-cell__art { position: relative; width: 100%; aspect-ratio: 5 / 7; border-radius: 10px; overflow: hidden; box-shadow: 0 9px 18px -8px rgba(0,0,0,.7); }
  .mt-ds-cell__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .mt-ds-cell.is-locked .mt-ds-cell__art img { filter: grayscale(1) brightness(.55); }
  .mt-ds-cell__badge {
    position: absolute; left: 4px; top: 4px;
    font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
    padding: 2px 6px; border-radius: 99px;
    background: var(--gold); color: #2a1a05;
  }
  .mt-ds-cell__lock { position: absolute; inset: 0; display: grid; place-items: center; }
  .mt-ds-cell__lock svg { width: 20px; height: 20px; stroke: var(--gold-soft); fill: none; stroke-width: 2; }
  .mt-ds-cell__name { font-size: 11px; color: var(--ink); line-height: 1.25; }
  .mt-ds-cell__note { font-size: 10px; color: var(--faint); }

  /* toolbar toggle */
  .tool-row { display: flex; justify-content: flex-end; padding: 0 16px 6px; }
  .tool-toggle {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--font-thai); font-size: 11px; color: var(--muted);
    background: transparent; border: 1px solid var(--edge-soft);
    border-radius: 999px; padding: 4px 10px; cursor: pointer;
  }
  .tool-toggle svg { width: 12px; height: 12px; stroke: var(--gold); fill: none; stroke-width: 2.4; transition: transform .2s ease; }
  .tool-toggle[aria-expanded="false"] svg { transform: rotate(180deg); }
  .tool-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .reader[hidden] { display: none; }

  .bar .back-btn { grid-column: 1; }
  .bar .mt-ds-plate { grid-column: 2; justify-self: center; max-width: 100%; }
  .bar .state { grid-column: 3; justify-self: end; }

  .state {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--faint);
    text-align: right;
    line-height: 1.2;
  }

  /* --------------------------------------------------- card-name drawer */
  /* Names only. Meanings stay off this board on purpose -- interpreting the
     card is แม่หมอ's entire value, and a board that explains cards replaces
     her. Every request to add meanings here gets measured against that. */
  .board { position: relative; overflow-x: clip; }

  /* A thin edge handle, not a labelled button -- on a phone the board is the
     whole screen and a pill in the header ate space the cards need. */
  .names-handle {
    position: absolute;
    left: -27px;
    top: 50%;
    transform: translateY(-50%);
    width: 27px;
    height: 62px;
    display: grid;
    place-items: center;
    padding: 0;
    background: #150f26;
    border: 1px solid var(--edge);
    border-right: 0;
    border-radius: 9px 0 0 9px;
    cursor: pointer;
  }
  .names-handle svg { width: 15px; height: 15px; stroke: var(--gold); fill: none; stroke-width: 2; transition: transform 220ms ease; }
  .names-handle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .names:not([hidden]) .names-handle svg { transform: rotate(180deg); }

  .names {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    width: min(206px, 58%);
    height: 100%;
    background: #150f26;
    border-left: 1px solid var(--edge);
    box-shadow: -12px 0 28px rgba(0, 0, 0, 0.45);
    transform: translateX(0);
    transition: transform 260ms cubic-bezier(.2, .7, .2, 1);
  }
  /* stays in the DOM so the handle rides along with it */
  .names[hidden] { display: block; transform: translateX(100%); }
  .names[hidden] .names-inner { visibility: hidden; }

  .names-inner { height: 100%; overflow-y: auto; padding: 14px 14px 24px; }

  .names-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--edge-soft);
  }

  .names-list { list-style: none; margin: 0; padding: 12px 0 0; display: flex; flex-direction: column; gap: 12px; }
  .names-list li { display: flex; gap: 9px; align-items: baseline; }
  .names-list .n {
    font-size: 11px;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
    min-width: 12px;
  }
  .names-list .en { font-family: var(--font-mark); font-style: italic; font-size: 14px; color: var(--ink); }
  .names-list .th { display: block; font-size: 12px; color: var(--muted); }
  .names-list .rev { display: block; font-size: 11px; color: var(--gold); }
  .names-empty { font-size: 12px; color: var(--faint); padding-top: 12px; }

  /* On a phone the drawer has to cover the board. On แม่หมอ's second screen
     there is room beside it, so dock it outside and let her read the names and
     watch the picks at the same time. */
  @media (min-width: 940px) {
    .board { overflow-x: visible; }
    .names {
      left: 100%;
      right: auto;
      box-shadow: none;
      border-left: 1px solid var(--edge);
      background: var(--surface);
    }
    .names[hidden] { transform: translateX(0); }
    .names[hidden] .names-inner { visibility: hidden; }
  }

  @media (prefers-reduced-motion: reduce) { .names { transition: none; } }

  /* -------------------------------------------------------------- the mat */
  .mat {
    padding: 22px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: center;
    justify-content: center;
  }

  .prompt {
    font-size: 15px;
    color: var(--muted);
    text-align: center;
    text-wrap: balance;
    min-height: 1.5em;
  }

  .prompt b { color: var(--gold-soft); font-weight: 600; }

  .slots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
  }

  .slot {
    width: var(--slot-w);
    aspect-ratio: var(--card-ratio, 0.67);
    border-radius: var(--radius);
    position: relative;
    perspective: 900px;
  }

  .slot.is-empty {
    border: 1px dashed var(--edge);
    background: rgba(255, 255, 255, 0.02);
  }

  .slot-num {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 13px;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
  }

  /* card flip */
  .card {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 620ms cubic-bezier(.2, .7, .2, 1);
    border-radius: var(--radius);
  }

  .card.is-face-up { transform: rotateY(180deg); }

  .card-side {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  }

  /* contain, never cover: face and back ratios differ per deck and from
     each other, so cover silently crops the art */
  .card-side img { width: 100%; height: 100%; display: block; object-fit: contain; }

  .card-front { transform: rotateY(180deg); }
  .card-front.is-reversed img { transform: rotate(180deg); }

  .card-name {
    margin-top: 6px;
    text-align: center;
    font-size: 11px;
    line-height: 1.3;
    color: var(--muted);
    font-family: var(--font-mark);
    font-style: italic;
  }

  .card-name .rev {
    display: block;
    font-family: var(--font-thai);
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--gold);
  }

  .slot-wrap { display: flex; flex-direction: column; align-items: center; width: var(--slot-w); }

  /* ------------------------------------------------------------ the fan */
  .fan-shell { width: 100%; overflow-x: auto; overflow-y: hidden; padding: 6px 0 14px; }
  .fan-shell[hidden] { display: none; }
  .fan-shell::-webkit-scrollbar { height: 0; }

  .fan {
    display: flex;
    justify-content: center;
    min-width: min-content;
    margin: 0 auto;
  }

  .fan {
    flex-wrap: wrap;
    row-gap: 8px;
    padding-inline-start: calc(var(--fan-w, 60px) * 0.5);
  }

  .fan-card {
    flex: 0 0 auto;
    width: var(--fan-w, 60px);
    margin-inline-start: calc(var(--fan-w, 60px) * -0.5);
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
    border-radius: 8px;
    transition: transform 220ms ease;
  }

  .fan-card { touch-action: none; }          /* let the card own the gesture */
  .fan-card:first-child { margin-inline-start: 0; }
  .fan-card:hover { z-index: 2; }
  .fan-card img { width: 100%; display: block; aspect-ratio: var(--back-ratio, 0.6); object-fit: contain; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.5); }
  .fan-card:hover, .fan-card:focus-visible { transform: translateY(-14px); }
  .fan-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .fan-card[disabled] { opacity: .28; cursor: default; transform: none; }
  /* keeps its space in the row so nothing re-flows when a card is taken */
  .fan-card.is-taken { visibility: hidden; pointer-events: none; }

  /* ------------------------------------------------------------ controls */
  .reveal-row { display: flex; justify-content: center; padding: 4px 16px 18px; }

  .btn {
    font-family: var(--font-thai);
    font-size: 15px;
    font-weight: 600;
    color: #2a1a05;
    background: linear-gradient(180deg, var(--gold-soft), var(--gold));
    border: 0;
    border-radius: 999px;
    padding: 12px 30px;
    cursor: pointer;
  }

  .btn:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }
  .btn[hidden] { display: none; }

  .reader {
    border-top: 1px solid var(--edge-soft);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.18);
  }

  .reader-label {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
    width: 100%;
  }

  .seg { display: flex; border: 1px solid var(--edge); border-radius: 999px; overflow: hidden; }

  .seg button {
    font-family: var(--font-thai);
    font-size: 13px;
    color: var(--muted);
    background: transparent;
    border: 0;
    padding: 7px 14px;
    cursor: pointer;
  }

  .seg button[aria-pressed="true"] { background: var(--plum-lift); color: var(--gold-soft); }
  .seg button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

  .ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-thai);
    font-size: 13px;
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--edge);
    border-radius: 999px;
    padding: 7px 14px;
    cursor: pointer;
  }

  .ghost:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .ghost svg { width: 14px; height: 14px; stroke: var(--gold); fill: none; stroke-width: 1.6; }


  /* the closed deck, shown while แม่หมอ sets up the round */
  .stack { position: relative; width: 150px; }
  .stack > img { aspect-ratio: var(--stack-ratio, 0.6); object-fit: contain; }
  .stack[hidden] { display: none; }
  .stack > img { width: 100%; display: block; border-radius: var(--radius); box-shadow: 0 10px 26px rgba(0,0,0,.5); position: relative; z-index: 2; }
  .stack-shadow {
    position: absolute; inset: 0; border-radius: var(--radius);
    background: var(--surface-2); border: 1px solid var(--edge-soft);
    transform: translate(5px, 5px); z-index: 1;
  }
  .stack-shadow--2 { transform: translate(10px, 10px); z-index: 0; }

  /* สับไพ่ throws a spray of cards out of the deck in an arc and pulls them
     back in. The old version only wobbled the three stack layers, which read as
     a shake rather than a shuffle. */
  .shuffle-fx { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
  .shuffle-fx img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--radius);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
    animation: card-throw var(--dur, 720ms) cubic-bezier(.34, .12, .2, 1) var(--delay, 0ms) both;
  }
  @keyframes card-throw {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
    38%  { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(.94); }
    72%  { transform: translate(calc(var(--tx) * .18), calc(var(--ty) * .18)) rotate(calc(var(--rot) * .2)) scale(1.02); }
    100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  }
  .stack.is-shuffling > img { animation: deck-settle 720ms ease-in-out; }
  @keyframes deck-settle {
    0%, 100% { transform: translateY(0) scale(1); }
    30%      { transform: translateY(4px) scale(.985); }
    70%      { transform: translateY(-2px) scale(1.01); }
  }

  @media (prefers-reduced-motion: reduce) {
    .shuffle-fx { display: none; }
    .stack.is-shuffling > img { animation: none; }
  }

  /* a picked card flies from the pile into its slot, so the pick reads as
     moving a card rather than one card dimming and another appearing */
  .fly {
    position: fixed;
    z-index: 15;
    transform-origin: top left;
    pointer-events: none;
    transition: transform 340ms cubic-bezier(.2, .7, .2, 1);
  }
  .fly img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .55);
  }
  .card.is-landing { opacity: 0; }
  .fly.is-dragging { transition: none; cursor: grabbing; }

  /* the empty slots light up while a card is over them */
  .slots.is-drop-target .slot.is-empty {
    border-color: rgba(212, 154, 44, .55);
    background: rgba(212, 154, 44, 0.07);
  }
  .slot.is-drop-hover {
    border-color: var(--gold) !important;
    background: rgba(212, 154, 44, 0.2) !important;
    box-shadow: 0 0 0 2px rgba(212, 154, 44, .35);
  }

  /* re-dealing the pile after เริ่มต้น */
  @keyframes fan-deal {
    0%   { transform: translateY(-16px) rotate(-6deg); opacity: 0; }
    100% { transform: translateY(0) rotate(0deg); opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .fly { transition: none; }
  }

  .field { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
  .field select,
  .field input {
    font-family: var(--font-thai);
    font-size: 13px;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--edge);
    border-radius: 8px;
    padding: 6px 8px;
  }
  .field input { width: 62px; font-variant-numeric: tabular-nums; }
  .field select:focus-visible,
  .field input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

  .stack-credit { margin: 0; font-size: 11px; color: var(--faint); text-align: center; }
  .stack-credit:empty { display: none; }

  /* locked decks: the deck itself shows the lock, so the reason is visible
     where the choice is made rather than in a toast that disappears */
  .stack.is-locked > img { filter: grayscale(1) brightness(.55); }
  .lock {
    position: absolute; inset: 0; z-index: 3;
    display: grid; place-items: center;
  }
  .preview-btn {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
  }
  .preview-btn[hidden] { display: none; }
  .preview-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

  .lock svg { width: 30px; height: 30px; stroke: var(--gold-soft); fill: none; stroke-width: 1.6; }
  .lock[hidden] { display: none; }
  .ghost.is-on { border-color: var(--gold); color: var(--gold-soft); }

  .score {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--muted);
    padding: 8px 10px;
    border: 1px solid var(--edge-soft);
    border-radius: 10px;
    background: rgba(61, 26, 92, 0.28);
  }
  .score b { color: var(--gold-soft); font-variant-numeric: tabular-nums; }
  .score-sep { width: 1px; height: 12px; background: var(--edge); }
  .score-note { color: var(--faint); }
  .score-note.is-capped { color: var(--gold); }

  /* ------------------------------------------------------ fullscreen card */
  .viewer {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgba(12, 8, 22, 0.94);
    display: grid;
    place-items: center;
    padding: 44px 20px 28px;
  }
  .viewer[hidden] { display: none; }
  .viewer-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .viewer-fig img {
    max-width: min(78vw, 380px);
    max-height: 72vh;
    width: auto;
    border-radius: 12px;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.6);
  }
  .viewer-fig img.is-reversed { transform: rotate(180deg); }
  .viewer-fig figcaption {
    font-family: var(--font-mark);
    font-style: italic;
    font-size: 15px;
    color: var(--ink);
    text-align: center;
  }
  .viewer-fig .rev { display: block; font-family: var(--font-thai); font-style: normal; font-size: 12px; color: var(--gold); }
  .viewer-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: transparent;
    border: 1px solid var(--edge);
    border-radius: 999px;
    padding: 7px;
    cursor: pointer;
    line-height: 0;
  }
  .viewer-close svg { width: 16px; height: 16px; stroke: var(--muted); fill: none; stroke-width: 1.8; }
  .viewer-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  .slot-open {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    cursor: zoom-in;
    padding: 0;
  }
  .slot-open:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

  /* ---------------------------------------------------------- save image */
  .reveal-row { gap: 10px; flex-wrap: wrap; }
  .btn--ghost {
    background: transparent;
    color: var(--gold-soft);
    border: 1px solid var(--gold);
  }

  .save-modal { position: fixed; inset: 0; z-index: 22; display: grid; place-items: center; padding: 20px; }
  .save-modal[hidden] { display: none; }
  .save-scrim { position: absolute; inset: 0; background: rgba(10, 6, 18, .8); }
  .save-card {
    position: relative;
    width: min(340px, 100%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--edge);
    border-radius: 16px;
  }
  .save-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
  .save-label { font-size: 11px; color: var(--faint); }
  .save-input {
    font-family: var(--font-thai);
    font-size: 15px;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--edge);
    border-radius: 10px;
    padding: 10px 12px;
  }
  .save-input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
  .save-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

  /* -------------------------------------------------------- brand strip */
  /* Persistent for the whole session and in every state, by design: querents
     screenshot readings, and an always-on strip rides every screenshot. */
  .strip {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 16px;
    background: #120c22;
    border-top: 1px solid var(--edge);
  }

  .mark {
    font-family: var(--font-mark);
    font-style: italic;
    font-size: 19px;
    letter-spacing: -0.01em;
    color: var(--gold-soft);
  }

  .strip-rule { width: 1px; height: 18px; background: var(--edge); }
  .strip-copy { font-size: 12px; color: var(--muted); }
  .strip a { color: inherit; text-decoration: none; }
  .strip a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

  @media (prefers-reduced-motion: reduce) {
    .card { transition-duration: 1ms; }
    .fan-card { transition: none; }
  }