/*
======================================================================
  5150 LUCK OF THE DRAW  -  LOOK OF THE DECKS  (luck.css)
======================================================================
  The terminal itself (screen, scan lines, status line, button style),
  the colours, fonts and page come from ../shared/console.css (loaded
  first, section 4 "THE TERMINAL"). This file only has the cards on
  the screen and the rows of buttons under it.
======================================================================
*/

/* The bottom rows: the deck buttons, then Class/Area, Draw and Shuffle. */
.deck-buttons button { font-size: 14px; padding: 6px 14px; letter-spacing: 0.1em; }
.deck-controls { padding-top: 6px; border-top: 1px dashed color-mix(in srgb, var(--ink) 30%, transparent); }

/* The screen: the cards on the left, the words on the right. It grows
   to fit the cards instead of scrolling. */
.deck-panel {
  height: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px 24px;
  align-items: start;
}
.deck-panel.is-stacked { grid-template-columns: minmax(0, 1fr); }
.deck-info p { margin: 0 0 8px; max-width: 34rem; }
.deck-info .term-cmd { color: var(--ink-dim); }
.deck-count b { color: var(--accent); font-weight: normal; }
.deck-note { color: var(--accent); min-height: 1.5em; }   /* keeps its line even when empty, so nothing jumps */

/* The pile: the deck's back on the left, the drawn card on the right. */
.pile { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.card-img {
  width: 240px;
  aspect-ratio: 182 / 254;
  border-radius: 10px;
  border: 2px solid var(--frame);
  background: #000;
  object-fit: cover;
  display: block;
  box-shadow: 0 0 18px var(--glow);
}
.card-img.is-new { animation: flip-in 0.35s ease-out; }
@keyframes flip-in { from { transform: rotateY(80deg); opacity: 0.2; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .card-img.is-new { animation: none; } }
.card-back { cursor: pointer; }
/* The back of a City Deck Profession card is printed sideways (wide). */
.card-img.card-wide { width: 334px; aspect-ratio: 254 / 182; }
.card-empty {
  width: 240px; aspect-ratio: 182 / 254; border-radius: 10px;
  border: 2px dashed color-mix(in srgb, var(--ink) 40%, transparent);
  display: grid; place-items: center;
  color: var(--ink-dim); text-align: center; padding: 10px;
}

/* The NPC rolls (City cards and Professions). On the City deck it spans
   the screen and always keeps its room, so the buttons don't jump. */
.npc-block { grid-column: 1 / -1; min-width: 0; }
/* City deck: the Profession card pictures on the left, the rolls beside
   them; the block keeps this room from the start. */
.deck-panel:not(.is-stacked) .npc-block { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; align-items: start; min-height: 220px; }
.deck-panel:not(.is-stacked) .npc-block > :not(.npc-cards) { grid-column: 2; }
.npc-block p { margin: 0 0 6px; }
.npc-rows { margin: 0 0 8px; padding-left: 1.6em; }
.npc-rows li:first-child { color: var(--accent); }
.npc-cards { grid-column: 1; grid-row: 1 / span 6; display: flex; flex-direction: column; gap: 6px; }
.npc-cards img { width: 84px; border-radius: 5px; border: 1px solid var(--frame); }
.npc-cards img.npc-back { width: 118px; }
@media (max-width: 700px) {
  .deck-panel:not(.is-stacked) .npc-block { min-height: 400px; font-size: 14px; }
  .drawn-line { min-height: 3em; }   /* room for a long card name to wrap */
  .npc-cards img { width: 64px; } .npc-cards img.npc-back { width: 90px; }
}
.deck-controls input[type="number"] { width: 4em; }
.deck-controls .g-break { flex-basis: 100%; height: 0; }
.terminal .deck-controls button:disabled { opacity: 0.4; cursor: default; }

/* Cards drawn so far (since the last shuffle), small, newest first, in
   one strip that scrolls sideways, so the buttons stay close. The strip
   always keeps its room (even before there's anything in it). */
.history { grid-column: 1 / -1; min-width: 0; }
.history-row { min-height: 120px; }
.history-empty { margin: 0; align-self: center; color: var(--ink-dim); font-size: 13px; }
.history h3 {
  margin: 0 0 6px;
  font-family: var(--font-text);
  font-weight: normal;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.history-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-color: var(--ink-dim) transparent; }
.history-row img { flex: none; width: 80px; aspect-ratio: 182 / 254; border-radius: 5px; border: 1px solid var(--frame); }

@media (max-width: 700px) {
  .deck-panel { grid-template-columns: minmax(0, 1fr); }
  .card-img, .card-empty { width: 42vw; }
  .card-img.card-wide { width: 100%; }
}