/* Durak - symbols only, no copy anywhere in the UI.
   Restyled for the Swiss editorial black stock: card faces are printed
   off-white paper, black suits in the text ink and red suits in the one
   accent. Backs are solid red with a hairline keyline. No shadows, no
   gradients, no rounded corners - the cards are rectangles of paper. */

.durak {
  --card-w: 76px;
  --card-h: 108px;
  border: 1px solid var(--rule);
  border-top: 2px solid var(--red);
  background: var(--paper-2);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.durak-board {
  display: grid;
  grid-template-rows: auto minmax(150px, 1fr) auto;
  gap: 14px;
  min-height: 460px;
}

/* --- rows --- */

.durak-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--card-h);
}

.durak-row.opponent { justify-content: center; }

.durak-row.mine {
  justify-content: center;
  flex-wrap: wrap;
}

.durak-table {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 1px dashed var(--rule-hot);
}

/* --- the card --- */

.card {
  width: var(--card-w);
  height: var(--card-h);
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 7px 8px;
  position: relative;
  flex-shrink: 0;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 0.18s ease, opacity 0.18s;
  animation: dealt 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

@keyframes dealt {
  from { opacity: 0; transform: translateY(-38px) rotate(-14deg) scale(0.86); }
  to   { opacity: 1; }
}

.card .pip {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: -0.03em;
}

.card .suit-lg {
  font-size: 1.9rem;
  line-height: 1;
  text-align: center;
}

.card .pip.foot {
  align-self: flex-end;
  transform: rotate(180deg);
}

.card.red { color: var(--red); }
.card.black { color: var(--paper); }

/* face-down: solid accent with a keyline, so a fanned row of backs still
   reads as separate cards. */
.card.back {
  background: var(--red);
  color: var(--ink);
  box-shadow: inset 0 0 0 4px var(--red), inset 0 0 0 5px rgba(242, 240, 236, 0.55);
  outline: 1px solid var(--paper);
}

/* trump marker: a hairline box inset in the card */
.card.trump::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid currentColor;
  opacity: 0.4;
  pointer-events: none;
}

.card.playable { cursor: pointer; }

.card.playable:hover,
.card.playable:focus-visible {
  transform: translateY(-14px) rotate(0deg);
  z-index: 3;
  outline: 2px solid var(--red);
  outline-offset: 0;
}

.card.dimmed { opacity: 0.35; }

/* the fan in hand: each card leans a little */
.durak-row.mine .card:nth-child(3n + 1) { transform: rotate(-2deg); }
.durak-row.mine .card:nth-child(3n + 2) { transform: rotate(1.4deg); }
.durak-row.mine .card:nth-child(3n + 3) { transform: rotate(-0.6deg); }
.durak-row.mine .card.playable:hover { transform: translateY(-14px) rotate(0deg); }

.durak-row.opponent .card { margin-left: -46px; }
.durak-row.opponent .card:first-child { margin-left: 0; }

/* --- a table pair: defence laid across the attack --- */

.pair {
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
}

.pair .card {
  position: absolute;
  inset: 0;
  animation: none;
}

.pair .card.defence {
  transform: translate(14px, 16px) rotate(9deg);
  animation: beat 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}

@keyframes beat {
  from { opacity: 0; transform: translate(44px, -22px) rotate(28deg); }
  to   { opacity: 1; transform: translate(14px, 16px) rotate(9deg); }
}

.pair.open .card.attack {
  cursor: default;
  animation: land 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}

@keyframes land {
  from { opacity: 0; transform: translateY(-34px) scale(0.9); }
  to   { opacity: 1; }
}

/* the pair the player must answer gets the accent ring */
.pair.target .card.attack {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

/* --- deck + trump + discard --- */

.durak-side {
  display: flex;
  align-items: center;
  gap: 22px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Deck with the trump lying across underneath it, half sticking out - the
   way it sits on a real table. A rotated card occupies card-h across, so the
   stack has to be that wide plus the deck's own offset. */
.deck-stack {
  position: relative;
  width: calc(var(--card-w) * 1.75);
  height: calc(var(--card-h) + 10px);
}

.deck-stack .card {
  position: absolute;
  animation: none;
}

/* Tucked at a slant rather than square-on: a 90deg rotation leaves only the
   card's upside-down foot showing past the deck, which reads as a mistake. */
.deck-stack .trump-under {
  left: calc(var(--card-w) * 0.60);
  top: 8px;
  transform: rotate(11deg);
  transform-origin: bottom left;
  z-index: 1;
}

.deck-stack .deck-top {
  left: 0;
  top: 0;
  z-index: 2;
}

.deck-count {
  position: absolute;
  left: 0;
  bottom: -11px;
  z-index: 3;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  padding: 1px 8px;
}

.discard-pile {
  width: var(--card-w);
  height: var(--card-h);
  border: 1px dashed var(--rule-hot);
  position: relative;
}

.discard-pile .card {
  position: absolute;
  inset: 0;
  animation: none;
}

/* --- controls: icons only --- */

/* Clear of the fanned hand, which lifts 14px on hover. */
.durak-controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

.durak-btn {
  width: 50px;
  height: 50px;
  background: none;
  border: 1px solid var(--rule-hot);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}

.durak-btn:hover:not(:disabled) {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.durak-btn:disabled {
  opacity: 0.28;
  cursor: default;
}

.durak-btn.primary {
  background: var(--red);
  border-color: var(--red);
  color: var(--ink);
}

.durak-btn.primary:hover:not(:disabled) {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* --- end-of-game stamp, still wordless --- */

@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.durak-stamp {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  z-index: 8;
  animation: rise 0.3s ease both;
}

.durak-stamp .mark {
  border: 4px solid var(--red);
  color: var(--red);
  background: var(--paper);
  padding: 16px 32px;
  transform: rotate(-6deg);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 3.4rem;
  line-height: 1;
  letter-spacing: -0.04em;
  display: flex;
  align-items: center;
  gap: 14px;
}

.durak-stamp .mark.win {
  border-color: var(--ink);
  color: var(--ink);
}

@media (max-width: 640px) {
  .durak {
    --card-w: 58px;
    --card-h: 84px;
    padding: 12px;
  }
  .durak-row.opponent .card { margin-left: -36px; }
  .durak-table { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .pair .card.defence,
  .pair.open .card.attack {
    animation: none !important;
  }
}