/* deck.css — the launcher grid. a hand of cards you deal onto the desk. oz purple, consistent with the rest. */

.card.p-deck .deck-body { padding: 14px 16px; }
.deck-hint { color: #9a90c4; font: 12.5px/1.5 system-ui; margin-bottom: 14px; border-left: 2px solid rgba(124,77,255,.5); padding-left: 10px; }
/* (Sum 2026-07-09) the hardcoded lavender washes out on the light skins — hand it to the skin's readable dim ink */
[data-skin="orange"] .deck-hint,
[data-skin="clinical"] .deck-hint { color: var(--text-dim); border-left-color: var(--accent); }
.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 12px; }
.deck-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 16px 8px;
  background: rgba(124,77,255,.08); border: 1px solid rgba(179,136,255,.22); border-radius: 12px;
  cursor: pointer; color: #e8e3ff; transition: background .12s, transform .07s, border-color .12s;
}
.deck-tile:hover { background: rgba(124,77,255,.2); border-color: rgba(179,136,255,.55); transform: translateY(-2px); }
.deck-tile:active { transform: translateY(0); }
/* lit = this card is open on the desk; tap it to close. the deck is the on/off switch. */
.deck-tile.on { background: rgba(124,77,255,.34); border-color: rgba(201,179,255,.85); box-shadow: inset 0 0 0 1px rgba(201,179,255,.4); }
.deck-tile.on::after { content: ''; position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: #5fe09a; box-shadow: 0 0 6px rgba(95,224,154,.85); }
/* CLEAN SKINS (Sum 2026-07-23, screenshot: "contrast") — the tile's hardcoded near-white lavender ink
   (#e8e3ff, made for the dark oz felt) is INVISIBLE on clinical's white. hand the tiles to the skin's
   own tokens: real ink, a visible seat, a solid border. same move the hint already made. */
[data-skin="clinical"] .deck-tile, [data-skin="corporate"] .deck-tile,
[data-skin="orange"] .deck-tile {
  color: var(--text); background: var(--surface); border-color: var(--line);
}
[data-skin="clinical"] .deck-tile:hover, [data-skin="corporate"] .deck-tile:hover,
[data-skin="orange"] .deck-tile:hover { background: var(--surface-2); border-color: var(--accent); }
[data-skin="clinical"] .deck-tile.on, [data-skin="corporate"] .deck-tile.on,
[data-skin="orange"] .deck-tile.on {
  background: var(--surface-2); border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.deck-emoji { font-size: 28px; line-height: 1; }
.deck-tile img { width: 40px; height: 40px; object-fit: contain; }   /* the GREEN ROOM's bot tiles wear png icons */
.deck-label { font: 500 var(--fs-ui) system-ui; }