/* ═══════════════════════════════════════════════════════════════════════════
   Papaz Kaçtı — cards & game table
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the card ────────────────────────────────────────────────────────── */
.card {
  --cw: 80px;
  position: relative; flex: none;
  width: var(--cw); aspect-ratio: 5 / 7;
  border-radius: calc(var(--cw) * .1);
  background: linear-gradient(160deg, #fffdf6 0%, #f6efdc 78%, #ece1c4 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,.4), 0 8px 18px rgba(0,0,0,.22), inset 0 0 0 1px rgba(60,50,20,.14);
  user-select: none; -webkit-user-select: none;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.card .corner {
  position: absolute; top: calc(var(--cw) * .055); left: calc(var(--cw) * .07);
  display: flex; flex-direction: column; align-items: center; line-height: 1;
  font-family: var(--font-ui); font-weight: 900;
  font-size: calc(var(--cw) * .19); letter-spacing: -.02em;
}
.card .corner svg { width: calc(var(--cw) * .15); height: calc(var(--cw) * .15); margin-top: calc(var(--cw) * .02); }
.card .corner.br { top: auto; left: auto; bottom: calc(var(--cw) * .055); right: calc(var(--cw) * .07); transform: rotate(180deg); }
.card.red { color: #c8102e; }
.card.black { color: #232733; }

/* pips area */
.card .pips { position: absolute; inset: 12% 24%; }
.card .pip { position: absolute; width: calc(var(--cw) * .21); height: calc(var(--cw) * .21); transform: translate(-50%, -50%); }
.card .pip.flip { transform: translate(-50%, -50%) rotate(180deg); }
.card .pip svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
.card .pip.big { width: calc(var(--cw) * .5); height: calc(var(--cw) * .5); }

/* face cards */
.card .faceart {
  position: absolute; inset: 14% 20%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2%;
  border: 1.5px solid currentColor; border-radius: calc(var(--cw) * .06);
  background:
    radial-gradient(80% 60% at 50% 30%, rgba(255,255,255,.5), transparent 70%),
    repeating-linear-gradient(45deg, rgba(200,16,46,.05) 0 4px, transparent 4px 8px);
}
.card .face-letter {
  font-family: var(--font-display); font-weight: 900;
  font-size: calc(var(--cw) * .42); line-height: 1;
  text-shadow: 0 2px 3px rgba(0,0,0,.15);
}
.card .face-suit { width: calc(var(--cw) * .16); height: calc(var(--cw) * .16); }
.card .face-suit.flip { transform: rotate(180deg); }
.card .crown { width: calc(var(--cw) * .3); height: calc(var(--cw) * .23); }
.card .crown path { fill: url(#pk-gold-grad, #d9b45b); }

/* the papaz card gets the royal treatment */
.card.is-papaz { box-shadow: 0 0 0 2px var(--gold), 0 6px 14px rgba(0,0,0,.45), 0 0 26px rgba(217,180,91,.4); }

/* card back */
.card.back {
  background:
    radial-gradient(circle at 50% 42%, rgba(217,180,91,.22) 0 16%, rgba(217,180,91,.06) 17% 26%, transparent 27%),
    repeating-linear-gradient(45deg, #711b2b 0 5px, #651726 5px 10px),
    #711b2b;
  box-shadow: 0 2px 6px rgba(0,0,0,.45), 0 8px 18px rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.35);
}
.card.back::before {
  content: ''; position: absolute; inset: 7% 9%;
  border: 1.5px solid rgba(217,180,91,.5); border-radius: calc(var(--cw) * .06);
}
.card.back::after {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d9b45b' d='M3 17.2 1.9 8.3l4.9 3.5L12 4.7l5.2 7.1 4.9-3.5-1.1 8.9zM3.6 18.8h16.8v1.9H3.6z'/%3E%3C/svg%3E") center/34% no-repeat;
}

/* mini backs for opponents */
.card.mini { --cw: 36px; border-radius: 6px; }
.card.mini .corner, .card.mini .pips, .card.mini .faceart { display: none; }
.card.mini.back::before { border-width: 1px; }
.card.mini.back::after { background-size: 58%; }

/* ── game screen layout ──────────────────────────────────────────────── */
.game-screen { display: flex; flex-direction: column; min-height: calc(100dvh - 70px); gap: 8px; }

.game-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.game-topbar .turn-chip {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--gold-hi); letter-spacing: .06em;
}

/* opponents */
.opponents { display: flex; gap: clamp(8px, 2vw, 18px); justify-content: center; flex-wrap: wrap; }
.opp {
  position: relative; width: clamp(150px, 30vw, 220px);
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 16px;
  padding: 10px 12px 12px; backdrop-filter: blur(8px);
  transition: border-color .25s, box-shadow .25s, opacity .3s, filter .3s;
}
.opp.turn { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 24px rgba(217,180,91,.28); }
.opp.target { border-color: var(--gold-hi); box-shadow: 0 0 0 2px rgba(244,221,150,.55), 0 0 34px rgba(217,180,91,.4); animation: target-pulse 1.4s ease-in-out infinite; }
@keyframes target-pulse { 50% { box-shadow: 0 0 0 2px rgba(244,221,150,.2), 0 0 18px rgba(217,180,91,.2); } }
.opp.out { opacity: .42; filter: grayscale(.8); }
.opp.gone { display: none; }

.opp-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.avatar {
  width: 40px; height: 40px; flex: none; border-radius: 13px;
  display: grid; place-items: center; font-size: 21px;
  border: 1px solid rgba(255,255,255,.16);
}
.opp-name { font-weight: 900; font-size: 14.5px; line-height: 1.15; }
.opp-count { font-size: 12px; color: var(--muted); font-weight: 700; }
.opp-out-chip {
  margin-left: auto; font-size: 10.5px; font-weight: 900; letter-spacing: .04em;
  padding: 4px 8px; border-radius: 999px;
  background: rgba(80, 200, 120, .15); color: #7fe0a1; border: 1px solid rgba(80,200,120,.35);
}

.opp-fan { display: flex; justify-content: center; height: 52px; align-items: flex-end; cursor: default; }
.opp.target .opp-fan { cursor: pointer; }
.opp-fan .card.mini { margin-left: calc(var(--overlap, 20px) * -1); transition: transform .15s; }
.opp-fan .card.mini:first-child { margin-left: 0; }
.opp.target .opp-fan .card.mini:hover { transform: translateY(-8px) rotate(-3deg) scale(1.12); z-index: 5; box-shadow: 0 0 0 2px var(--gold-hi), 0 10px 20px rgba(0,0,0,.5); }
.opp.busy .avatar { animation: bob .6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-4px); } }
.opp .dots::after { content: '…'; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

/* table centre */
.table-centre {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 110px; position: relative;
}
.status-pill {
  padding: 9px 22px; border-radius: 999px;
  background: rgba(3, 12, 7, .6); border: 1px solid var(--panel-line);
  font-weight: 800; font-size: clamp(13.5px, 2.6vw, 16px); text-align: center;
  backdrop-filter: blur(6px); max-width: 92vw;
  transition: border-color .3s; min-height: 40px; display: flex; align-items: center;
}
.status-pill.hot { border-color: var(--gold); color: var(--gold-hi); }

.discard-zone { position: relative; height: 86px; width: 200px; }
.discard-zone .pile-stack { position: absolute; inset: 0; }
.discard-zone .card { --cw: 56px; position: absolute; left: 50%; top: 50%; }
.pile-tag {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  z-index: 3;
  font-size: 11px; font-weight: 800; color: var(--muted);
  background: rgba(0,0,0,.55); padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}

/* human area */
.human-zone { padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
.human-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 4px; }
.human-head .avatar { width: 34px; height: 34px; font-size: 17px; border-radius: 11px; background: linear-gradient(160deg, rgba(217,180,91,.35), rgba(217,180,91,.1)); }
.human-head .you-label { font-weight: 900; }
.human-head .cardcount { color: var(--muted); font-weight: 800; font-size: 13px; }
.human-head .out-chip {
  font-size: 11px; font-weight: 900; padding: 4px 10px; border-radius: 999px;
  background: rgba(80,200,120,.15); color: #7fe0a1; border: 1px solid rgba(80,200,120,.35);
}

.hand {
  position: relative; height: calc(clamp(92px, 21vw, 150px) + 26px);
  display: flex; justify-content: center; align-items: flex-end;
  --cw: clamp(64px, 14.5vw, 96px);
}
.hand .card { position: absolute; bottom: 12px; transform-origin: bottom center; z-index: 1; }
.hand .card:hover { z-index: 30; }
.hand.tiny { --cw: clamp(46px, 10vw, 64px); }

/* ── overlays ────────────────────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 18px;
  background: rgba(2, 9, 5, .78); backdrop-filter: blur(7px);
  animation: fade-in .3s ease both; overflow: auto;
}
.overlay .modal.wide { width: min(94vw, 560px); }

.result-head { text-align: center; margin-bottom: 6px; }
.result-head .big-emoji { font-size: 46px; line-height: 1; display: block; margin-bottom: 8px; }
.result-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(24px, 5vw, 34px); }
.result-title.won { background: linear-gradient(180deg, #fbeaa9, var(--gold-lo)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.result-title.lost { color: #ff9aa7; }
.result-sub { color: var(--muted); font-size: 14.5px; margin-top: 4px; }

.podium { display: flex; flex-direction: column; gap: 8px; margin: 20px 0 6px; }
.podium-row {
  display: flex; align-items: center; gap: 12px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.07);
  padding: 10px 14px; border-radius: 13px;
}
.podium-row.first { border-color: var(--gold); background: rgba(217,180,91,.1); }
.podium-row.loser-row { border-color: rgba(255,120,140,.4); }
.podium-row .place { font-family: var(--font-display); font-weight: 900; width: 34px; color: var(--gold-hi); font-size: 17px; text-align: center; flex: none; }
.podium-row .avatar { width: 34px; height: 34px; font-size: 17px; border-radius: 10px; }
.podium-row .who { flex: 1; font-weight: 800; font-size: 15px; }
.podium-row .who small { display: block; color: var(--muted); font-weight: 700; font-size: 12px; }
.podium-row .mini-card-wrap { flex: none; }

.result-points { display: flex; justify-content: center; gap: 20px; margin: 12px 0 20px; font-weight: 900; }
.result-points .p { color: var(--gold-hi); font-size: 19px; }
.result-points .s { color: #7fe0a1; font-size: 19px; }

.overlay-actions { display: grid; gap: 10px; }
.overlay-actions .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* spectating bar */
.spectate-bar {
  position: fixed; left: 50%; bottom: 16px; translate: -50% 0; z-index: 55;
  display: flex; align-items: center; gap: 12px;
  background: rgba(8, 20, 12, .92); border: 1px solid var(--panel-line);
  padding: 10px 12px 10px 18px; border-radius: 999px; box-shadow: var(--shadow-2);
  font-weight: 800; font-size: 14px; max-width: 94vw;
}
.spectate-bar .btn { padding: 9px 16px; font-size: 13.5px; border-radius: 999px; }

/* ── deal animation ──────────────────────────────────────────────────── */
.deal-stage { position: fixed; inset: 0; z-index: 65; pointer-events: none; }
.fly-card { position: fixed; z-index: 66; will-change: transform; transition: transform .5s cubic-bezier(.3,.7,.3,1), opacity .5s; }
.fly-card .card { transition: none; }

/* king-of-the-hill reveal on loser's papaz */
.papaz-reveal { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 8px 0 4px; }
.papaz-reveal .card { --cw: 110px; animation: papaz-in .7s cubic-bezier(.2,1.5,.4,1) both; }
.papaz-reveal .tag {
  font-family: var(--font-display); font-weight: 900; letter-spacing: .3em; font-size: 15px;
  color: var(--gold-hi);
}
@keyframes papaz-in { from { transform: rotate(-14deg) scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }

/* losing shake */
body.shake { animation: shake .5s ease; }
@keyframes shake {
  20% { translate: -7px 0; } 40% { translate: 6px 0; } 60% { translate: -4px 0; } 80% { translate: 3px 0; }
}

@media (max-width: 640px) {
  .opp { width: clamp(130px, 44vw, 180px); }
  .opponents:has(.opp.gone) .opp { width: 100%; max-width: 320px; }
  .hand { --cw: clamp(52px, 13vw, 76px); height: calc(clamp(76px, 18vw, 116px) + 22px); }
  .discard-zone { height: 70px; }
  .discard-zone .card { --cw: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .fly-card { transition-duration: .01ms !important; }
  .opp.target, .opp.busy .avatar, .card.back::after { animation: none !important; }
}