/* Unisci le Carte — stile proprio del gioco */

/* Fila in arrivo: si vede sempre prima, così non arriva a sorpresa */
.uc-incoming { background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius); padding: 8px; }
.uc-incoming-label { display: flex; justify-content: space-between; align-items: center; font-size: 15px; color: var(--muted); margin-bottom: 6px; gap: 8px; }
.uc-dots { display: flex; gap: 5px; }
.uc-dots i { width: 12px; height: 12px; border-radius: 99px; border: 2px solid var(--calm); }
.uc-dots i.on { background: var(--calm); }
.uc-incoming-row { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 8px; }
.uc-incoming-row .card { height: 34px; font-size: 16px; opacity: .7; }
.uc-incoming.soon { border-color: var(--calm); }

.uc-board { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 8px; flex: 1; touch-action: none; }
.uc-col {
  background: var(--slot); border: 2px dashed var(--line); border-radius: var(--radius);
  padding: 6px; display: flex; flex-direction: column; min-height: calc(var(--cap) * 34px + 60px);
  position: relative; transition: border-color var(--t), background var(--t); cursor: pointer;
}
.uc-col:focus-visible { outline: 4px solid var(--accent); outline-offset: 2px; }
.uc-col.target { border: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--slot)); }
.uc-col.over, .uc-col.hint { border: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 20%, var(--slot)); }
.uc-col.match::after {
  content: "＝"; position: absolute; bottom: -12px; right: -6px; background: var(--good); color: #fff;
  border-radius: 99px; width: 28px; height: 28px; display: grid; place-items: center; font-size: 16px; font-weight: 700; z-index: 2;
}
.uc-col.danger { border-color: var(--warn); border-style: solid; }
.uc-foot { text-align: center; font-size: 13px; color: var(--muted); margin-top: auto; padding-top: 6px; }
.uc-cap { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; }
.uc-cap i { width: 7px; height: 7px; border-radius: 99px; background: var(--line); }
.uc-cap i.on { background: var(--muted); }
.uc-cap i.on.last { background: var(--warn); }
.uc-deal { margin: auto 0; min-height: 64px; border-radius: 10px; border: 2px dashed var(--accent); background: transparent; color: var(--accent); font-size: 26px; display: grid; place-items: center; }
.uc-deal small { font-size: 13px; display: block; }

/* Le carte coperte mostrano solo la parte alta, come nell'originale */
.uc-col .card.covered { height: 30px; margin-bottom: 2px; font-size: 15px; align-items: flex-start; padding-top: 3px; box-shadow: none; }
.uc-col .card.covered .sym { font-size: 13px; }
.uc-col .card.top { cursor: grab; }
.uc-col .card.selected { outline: 4px solid var(--accent); outline-offset: 2px; transform: translateY(-3px); }
.uc-col .card.hint-src { outline: 4px dashed var(--accent); outline-offset: 2px; }
.uc-ghost { position: fixed; z-index: 20; pointer-events: none; width: 90px; transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 8px 18px rgba(0,0,0,.25); }

@media (max-width: 520px) {
  .uc-col .card.covered { height: 26px; flex-direction: row; gap: 2px; font-size: 13px; }
  .uc-col .card.covered .sym { font-size: 10px; }
  .uc-incoming-row .card { height: 30px; font-size: 13px; flex-direction: row; }
  .uc-col { padding: 4px; min-height: calc(var(--cap) * 28px + 56px); }
  .uc-board, .uc-incoming-row { gap: 5px; }
}