/* Hand-maintained project styles (there is no SCSS build in this repo). */

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.card-constrained {
  max-width: 30rem;
}

.document-scroll {
  max-height: 24rem;
  overflow-y: auto;
}

/* --- game rows (crew library, player library, search results) --- */

/* min-width:0 lets a long title shrink/wrap instead of squeezing the action off the row. */
.game-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}

.game-actions {
  flex-shrink: 0;
}

.game-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.game-identity {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

/* The art box reserves the thumbnail footprint so enlarging never reflows the row. */
.game-art {
  position: relative;
  flex-shrink: 0;
  width: 4.5rem;
  height: 2.5rem;
}

.game-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Enlarged state, duplicated below for :hover — keep the two blocks in sync.
   Opens downward from the thumbnail so the row's own name stays readable; it does
   overlay the rows beneath, and pointer-events:none keeps their controls clickable.
   Focus is NOT gated on hover support — that would drop keyboard access on
   touch-primary devices used with a keyboard. */
.game-identity:focus-within .game-art img {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.25rem;
  z-index: 1080;
  width: auto;
  height: auto;
  max-width: 18rem;
  max-height: 14rem;
  padding: 0.25rem;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--bs-box-shadow);
  pointer-events: none;
}

@media (hover: hover) {
  .game-identity:hover .game-art img {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
    z-index: 1080;
    width: auto;
    height: auto;
    max-width: 18rem;
    max-height: 14rem;
    padding: 0.25rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--bs-box-shadow);
    pointer-events: none;
  }
}

/* Assets file browser: a long unbroken filename (e.g. a tokenized upload
   name, capped at 128 chars) must not force the whole table into a
   horizontal scroll. Truncate the display name with an ellipsis (full name
   stays in the title tooltip and the rename field), and bound the inline
   rename input so it can't grow to the filename's width either. */
.asset-filename {
  display: inline-block;
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.asset-rename-input {
  max-width: 12rem;
}

/* Top-10 editor. The drag handle only appears when a pointer is available:
   dragging is progressive enhancement, and the up/down buttons beside it are
   the real (and only accessible) control, so a touch or keyboard user should
   not be shown an affordance that does nothing for them. */
.toplist-handle {
  cursor: grab;
  user-select: none;
  line-height: 1;
  padding: 0.125rem 0.25rem;
}

@media (hover: none) {
  .toplist-handle {
    display: none;
  }
}

.toplist-dragging {
  opacity: 0.5;
}

.toplist-rank {
  min-width: 1.75rem;
}

/* Unfilled ranks: visible as structure without competing with real content. */
.toplist-placeholder {
  border-style: dashed;
  background-color: transparent;
}

/* Top-10 member controls: reorder and remove sit on the same row, so they need
   real hit areas and visible separation. Packed together with .p-0 they were
   ~14px apart, which made "move this game down" and "delete this game" the same
   gesture within a slip of the mouse — found by doing exactly that. 32px is
   still compact but no longer a trap; the remove button is also confirmed. */
.toplist-member-action {
  min-width: 2rem;
  min-height: 2rem;
  line-height: 1;
  padding: 0.25rem 0.4rem;
}