/* v1.10.2 — Card Clarity First
   Removes intrusive character art from card faces and replaces it with subtle translucent Silk Road motifs. */

/* Merchant cards: no illustration window, no photo art; restore full focus to spice conversion. */
.game-card:not(.point) .card-art-window,
.game-card:not(.point) .card-art-window img,
.unified-action-popup .broadcast-merchant-card .card-art-window,
.unified-action-popup .broadcast-merchant-card .card-art-window img,
.point-art-layer{
  display:none !important;
}

/* Replace image art with subtle monogram-like Silk Road patterns. */
.game-card::before,
.completed-point-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.game-card:not(.point)::before{
  display:block !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 20%,rgba(71,45,24,.05) 100%),
    url('art/card-pattern-merchant.svg') center/148px 148px repeat !important;
  opacity:.14 !important;
  filter:none !important;
}

.game-card.point::before,
.completed-point-card::before{
  display:block !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0) 24%,rgba(76,48,25,.05) 100%),
    url('art/card-pattern-point.svg') center/150px 150px repeat !important;
  opacity:.18 !important;
  filter:none !important;
}

.game-card::after,
.completed-point-card::after{
  background:
    linear-gradient(180deg,rgba(255,247,222,.14),transparent 28%,rgba(54,35,22,.05) 74%,rgba(45,25,15,.12)),
    radial-gradient(circle at 50% 35%,transparent 34%,rgba(36,20,11,.06)) !important;
}

.game-card > *,
.completed-point-card > *{
  position:relative;
  z-index:2;
}

/* Merchant card layout compresses back to pure information hierarchy. */
.game-card:not(.point){
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  gap:4px !important;
}
.game-card:not(.point) .card-type{flex:0 0 auto}
.game-card:not(.point) .effect{
  flex:1 1 auto;
  min-height:0 !important;
  margin:4px 4px 0 !important;
  padding:7px 5px !important;
  border-radius:8px !important;
  background:linear-gradient(160deg,rgba(241,225,192,.9),rgba(202,173,126,.82)) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.48),0 3px 9px rgba(48,27,15,.14) !important;
}
.game-card:not(.point) .card-foot,
.game-card:not(.point) .bonus-area{
  margin-inline:4px;
}

/* Completed orders remain legible and slightly richer than empty slots. */
.completed-point-card .point-cost-top{background:rgba(233,221,194,.9) !important}
.completed-point-score{background:linear-gradient(180deg,rgba(130,95,58,.86),rgba(82,56,35,.92)) !important}

/* Used cards keep colour identity while dimmed. */
.played-hand-card{
  opacity:.92 !important;
  filter:brightness(.74) saturate(.78) contrast(.96) !important;
}
.played-hand-card::before{opacity:.10 !important}
.played-hand-card::after{background:linear-gradient(180deg,rgba(21,18,16,.16),rgba(10,9,8,.34)) !important}
.played-hand-card .effect{background:linear-gradient(160deg,rgba(211,193,162,.72),rgba(171,144,109,.64)) !important}

/* Action popup cards follow the same clarity rule. */
.unified-action-popup .broadcast-merchant-card{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
}
.unified-action-popup .broadcast-merchant-card .effect{
  flex:1 1 auto !important;
  min-height:0 !important;
  padding:10px 8px !important;
}

/* Small landscape phones: keep pattern subtle. */
@media (orientation:landscape) and (max-height:620px){
  .game-card:not(.point){gap:2px !important}
  .game-card:not(.point) .effect{margin:2px 2px 0 !important;padding:4px 3px !important}
  .game-card:not(.point) .card-foot,
  .game-card:not(.point) .bonus-area{margin-inline:2px}
}
@media (orientation:landscape) and (max-height:560px){
  .game-card:not(.point)::before{opacity:.11 !important}
  .game-card.point::before,
  .completed-point-card::before{opacity:.14 !important}
}