.card-preview {
  position: fixed;
  z-index: 30;
  display: block;
  width: min(42rem, calc(100vw - 1.5rem));
  max-height: min(38rem, calc(100vh - 1.5rem));
  overflow: auto;
  padding: .85rem;
  color: var(--ink);
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overscroll-behavior: contain;
}
.card-preview[hidden] { display: none; }
.card-preview-content { display: grid; grid-template-columns: minmax(180px, 300px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.card-preview-loading { min-height: 8rem; }
.card-preview-art-wrap { display: grid; place-items: center; min-height: 8rem; overflow: hidden; background: var(--surface); border-radius: 7px; }
.card-preview-art { display: block; width: 100%; height: auto; max-height: 28rem; object-fit: contain; border-radius: 7px; }
.card-preview-art-unavailable { padding: .75rem; color: var(--muted); font-size: .82rem; text-align: center; }
.card-preview-summary { min-width: 0; }
.card-preview-summary h2 { margin: 0 0 .35rem; font-size: 1.05rem; line-height: 1.2; overflow-wrap: anywhere; }
.card-preview-summary p { margin: .35rem 0; }
.card-preview-summary .card-text { max-height: 14rem; overflow: auto; font-size: .91rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.card-preview-status { color: var(--muted); font-size: .88rem; }
.card-preview-status.is-error { color: var(--error); }
.card-preview-close { grid-column: 1 / -1; display: block; margin: 0 0 0 auto; padding: .25rem .5rem; color: var(--accent-strong); background: transparent; border: 1px solid var(--line-strong); border-radius: 5px; cursor: pointer; }
.card-preview-button { display: inline-flex; align-items: center; min-height: 2.2rem; margin: .25rem 0 0 .45rem; padding: .25rem .55rem; color: var(--accent-strong); background: transparent; border: 1px solid var(--line-strong); border-radius: 5px; font-size: .8rem; cursor: pointer; }
.card-preview-button:hover, .card-preview-button[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent); }
.card-preview-touch-host { display: inline; }
.card-tile.card-preview-touch-host { display: flex; }

.rules-term { position: relative; color: inherit; text-decoration: underline dotted var(--accent-strong); text-decoration-thickness: .1em; text-underline-offset: .16em; cursor: help; }
.rules-term:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.rules-term.is-open { color: var(--accent-strong); }
.rules-hint { position: fixed; z-index: 40; left: var(--rules-hint-left, 1rem); top: var(--rules-hint-top, 1rem); display: none; width: min(28rem, calc(100vw - 1.5rem)); max-height: min(24rem, calc(100vh - 1.5rem)); padding: .65rem .75rem; overflow: auto; color: var(--ink); text-align: left; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: 7px; box-shadow: var(--shadow); font-size: .88rem; line-height: 1.4; white-space: pre-line; pointer-events: auto; }
.rules-term.is-open > .rules-hint { display: block; }
.rules-hint:focus { outline: 3px solid var(--focus); outline-offset: 2px; }

@media (max-width: 720px) {
  .card-preview { width: min(29rem, calc(100vw - 1rem)); max-height: calc(100vh - 1rem); }
.card-preview-content { grid-template-columns: 1fr; }
  .card-preview-art { max-height: 22rem; }
}
@media (prefers-reduced-motion: reduce) {
  .card-preview, .rules-hint { scroll-behavior: auto; }
}
@media (forced-colors: active) {
  .card-preview, .rules-hint, .card-preview-button { border: 1px solid CanvasText; }
}