.own-game { min-height: 640px; scroll-margin-top: 8px; }
.rd { position: relative; display: flex; flex-direction: column; min-height: 640px; }

/* Score */
.rd-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 8px 12px; }
.rd-side { position: relative; padding: 6px 10px; border: 2px solid transparent; border-radius: var(--radius-sm); color: var(--muted); font-size: 0.82rem; font-weight: 600; transition: border-color 0.2s, background 0.2s; }
.rd-side:last-child { text-align: right; }
.rd-side strong { display: block; color: var(--text); font-size: 1.6rem; line-height: 1.1; }
.rd-side.rd-turn { border-color: #ffc454; background: rgba(255, 196, 84, 0.1); color: var(--text); }
.rd-bar { height: 5px; margin-top: 4px; overflow: hidden; background: var(--surface-2); border-radius: 3px; }
.rd-bar i { display: block; width: 0; height: 100%; background: #ffc454; border-radius: 3px; transition: width 0.4s; }
.rd-side:last-child .rd-bar i { margin-left: auto; background: #ff7aa8; }
.rd-round { color: var(--muted); font-size: 0.84rem; font-weight: 600; text-align: center; }
.rd-plus { position: absolute; top: -2px; left: 50%; color: #ffc454; font-size: 1.3rem; font-weight: 800; animation: rd-plus 1s ease-out both; pointer-events: none; }
@keyframes rd-plus { 0% { opacity: 0; transform: translateY(14px) scale(0.7); } 25% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-16px); } }
.rd-pop { animation: rd-pop 0.45s ease; }
@keyframes rd-pop { 40% { transform: scale(1.35); color: #ffc454; } }

/* Table */
.rd-felt { position: relative; flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 10px 8px; background: radial-gradient(120% 90% at 50% 45%, #1b7a57, #0b4230); transition: box-shadow 0.25s; }
.rd-side-row { position: relative; display: flex; justify-content: center; align-items: center; min-height: 66px; }
.rd-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.rd-table { flex: 1; align-content: center; min-height: 190px; padding: 8px 4px; border: 1px dashed rgba(255, 255, 255, 0.16); border-radius: var(--radius-sm); }
.rd-hand { min-height: 108px; }

.rd-pile, .rd-deck { position: absolute; display: grid; place-items: center; width: 42px; height: 60px; color: #fff; font-size: 0.86rem; font-weight: 800; text-shadow: 0 1px 2px #000; }
.rd-pile { left: 2px; background: rgba(0, 0, 0, 0.22); border: 1px dashed rgba(255, 255, 255, 0.3); border-radius: 7px; }
.rd-pile.rd-has { background: repeating-linear-gradient(45deg, #1f5fbf 0 4px, #174a96 4px 8px); border: 2px solid #fbf7ec; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3); }
.rd-pile small { position: absolute; bottom: -13px; color: #cfe9de; font-size: 0.6rem; font-weight: 600; text-shadow: none; white-space: nowrap; }
.rd-deck { right: 2px; background: repeating-linear-gradient(45deg, #7a3e2d 0 4px, #66321f 4px 8px); border: 2px solid #fbf7ec; border-radius: 7px; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3); }
.rd-deck[hidden] { display: none; }

/* Status */
.rd-status { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 66px; text-align: center; }
.rd-turnline { padding: 2px 12px; background: rgba(0, 0, 0, 0.3); border-radius: 999px; color: #e6f5ee; font-size: 0.8rem; font-weight: 700; }
.rd-turnline.rd-yours { background: #ffc454; color: #322100; }
.rd-msg { color: #e6f5ee; font-size: 0.9rem; line-height: 1.35; }

/* Cards */
.rd-card { --c: #333; position: relative; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: center; width: clamp(56px, 15.6vw, 72px); aspect-ratio: 5 / 7.4; padding: 3px 2px; background: #fbf7ec; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35); color: var(--c); font-family: var(--font); }
.rd-card svg { width: 66%; height: auto; }
.rd-num { font-size: 1.1rem; font-weight: 800; line-height: 1.1; }
.rd-court { min-height: 0.95em; font-size: 0.6rem; font-weight: 650; line-height: 1; }
.rd-coins { --c: #a66a00; }
.rd-cups { --c: #b3261e; }
.rd-swords { --c: #1d4f91; }
.rd-clubs { --c: #1a6b3c; }
.rd-new { outline: 3px solid #ffc454; }
.rd-slot { visibility: hidden; }
.rd-back { width: clamp(40px, 11vw, 46px); background: repeating-linear-gradient(45deg, #1f5fbf 0 5px, #174a96 5px 10px); border: 2px solid #fbf7ec; }
.rd-peek { outline: 3px solid #5fdcff; transform: translateY(-3px); }
.rd-taking { outline: 3px solid #ffc454; animation: rd-glow 0.5s ease infinite alternate; }
@keyframes rd-glow { to { transform: translateY(-5px) scale(1.05); box-shadow: 0 0 18px 3px #ffc454; } }

button.rd-card { cursor: pointer; transition: transform 0.12s; }
button.rd-card:hover:not(:disabled) { transform: translateY(-6px); }
button.rd-card:disabled { cursor: default; filter: brightness(0.8); }
.rd-can { outline: 3px solid #5fdcff; outline-offset: 1px; }
.rd-tag { position: absolute; top: -9px; left: 50%; padding: 1px 6px; background: #5fdcff; border-radius: 999px; color: #00212e; font-size: 0.62rem; font-weight: 800; line-height: 1.4; transform: translateX(-50%); white-space: nowrap; }
.rd-tag.rd-hot { background: #ffc454; color: #322100; }

.rd-stack { position: relative; display: inline-flex; padding: 4px 16px 4px 4px; background: rgba(255, 196, 84, 0.22); border: 1px dashed #ffc454; border-radius: 10px; }
.rd-stack .rd-card + .rd-card { margin-left: -36px; }
.rd-stack-label { position: absolute; bottom: -9px; left: 50%; padding: 0 6px; background: #ffc454; border-radius: 999px; color: #322100; font-size: 0.6rem; font-weight: 800; line-height: 1.5; transform: translateX(-50%); white-space: nowrap; }

/* Cards in flight and announcements */
.rd-fx { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.rd-ghost { position: absolute; margin: 0; }
.rd-deal { animation: rd-deal 0.34s ease-out both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes rd-deal { from { opacity: 0; transform: translateY(-46px) scale(0.6) rotate(-7deg); } }

.rd-stamp { position: absolute; top: 38%; left: 50%; display: flex; flex-direction: column; align-items: center; min-width: 200px; max-width: 92%; padding: 10px 24px; background: rgba(9, 13, 18, 0.93); border: 3px solid var(--tone, #ffc454); border-radius: 16px; box-shadow: 0 10px 36px rgba(0, 0, 0, 0.55), 0 0 34px var(--tone, #ffc454); color: #fff; text-align: center; transform: translate(-50%, -50%); animation: rd-stamp 1.15s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.rd-stamp strong { color: var(--tone, #ffc454); font-size: 2.1rem; font-weight: 850; letter-spacing: 0.01em; line-height: 1.1; }
.rd-stamp span { font-size: 0.95rem; font-weight: 650; }
.rd-stamp.rd-small { min-width: 150px; padding: 6px 18px; border-width: 2px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); animation-duration: 0.8s; }
.rd-stamp.rd-small strong { font-size: 1.25rem; }
.rd-stamp.rd-huge strong { font-size: 2.8rem; }
@keyframes rd-stamp { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-6deg); } 22% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 34% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -60%) scale(0.96); } }
.rd-flash { box-shadow: inset 0 0 70px 14px #ffc454; }

/* Footer and panels */
.rd-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 14px; padding: 8px 14px; color: var(--muted); font-size: 0.84rem; }
.rd-foot .linklike { padding: 0; color: var(--accent-strong); font-size: 0.84rem; }
.rd-links { display: flex; gap: 14px; }

.rd-panel { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; overflow: hidden auto; background: radial-gradient(110% 80% at 50% 38%, #1f8a62, #0a3b2b); border-radius: var(--radius); text-align: center; }
.rd-panel[hidden] { display: none; }
.rd-panel > * { position: relative; z-index: 1; }

.rd-logo { color: #ffc454; font-size: clamp(3.6rem, 16vw, 5rem); font-style: italic; font-weight: 900; letter-spacing: -0.02em; line-height: 1; text-transform: uppercase; text-shadow: 0 4px 0 #a15c00, 0 8px 0 #4d2b00, 0 14px 24px rgba(0, 0, 0, 0.55); transform: rotate(-3deg); }
.rd-tip { max-width: 30ch; color: #fff; font-size: 1.02rem; font-weight: 700; line-height: 1.4; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6); }
.rd-fan { display: flex; justify-content: center; margin: 6px 0; }
.rd-fan .rd-card { width: 74px; margin: 0 -9px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); }
.rd-fan .rd-card:nth-child(1) { transform: rotate(-12deg) translateY(8px); }
.rd-fan .rd-card:nth-child(3) { transform: rotate(12deg) translateY(8px); }

.rd-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.rd-go { min-width: 190px; padding: 13px 26px 11px; background: linear-gradient(#ffd97d, #f5a623); border: 0; border-bottom: 7px solid #a96400; border-radius: 16px; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4); color: #3a2300; font: italic 900 1.3rem/1.1 var(--font); text-transform: uppercase; cursor: pointer; animation: rd-beat 1.3s ease-in-out infinite; }
.rd-go:hover { filter: brightness(1.07); }
.rd-go:active { border-bottom-width: 2px; transform: translateY(5px); }
@keyframes rd-beat { 50% { transform: scale(1.04); } }
.rd-alt { min-height: 44px; padding: 8px 16px; background: rgba(0, 0, 0, 0.28); border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 12px; color: #fff; font: 800 0.95rem/1.1 var(--font); cursor: pointer; }
.rd-alt:hover { background: rgba(0, 0, 0, 0.42); }

/* Result banner */
.rd-result { width: min(100%, 340px); }
.rd-result h2 { font-size: clamp(2.5rem, 11vw, 3.4rem); font-style: italic; font-weight: 900; letter-spacing: -0.02em; line-height: 1; text-transform: uppercase; }
.rd-result p { margin-top: 8px; color: #fff; font-size: 1rem; font-weight: 700; }
.rd-won h2 { color: #ffc454; text-shadow: 0 4px 0 #a15c00, 0 7px 0 #4d2b00, 0 0 34px rgba(255, 196, 84, 0.6); transform: rotate(-2deg); animation: rd-land 0.6s cubic-bezier(0.2, 1.5, 0.4, 1); }
.rd-lost h2 { color: #ff9db8; text-shadow: 0 4px 0 #8a2346, 0 7px 0 #4a0f24; transform: rotate(-1deg); animation: rd-drop 0.6s ease-out; }
.rd-hand-end h2 { color: #fff; font-size: clamp(2rem, 9vw, 2.6rem); text-shadow: 0 4px 0 #0a3b2b, 0 8px 14px rgba(0, 0, 0, 0.5); }
@keyframes rd-land { 0% { transform: scale(2.4) rotate(-8deg); } }
@keyframes rd-drop { 0% { transform: translateY(-34px); } 60% { transform: translateY(5px) rotate(-1.5deg); } }

/* Score face-off */
.rd-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: min(100%, 320px); overflow: hidden; background: #0a1420; border: 4px solid #33465c; border-radius: 16px; box-shadow: 0 6px 0 #0a1420, 0 14px 24px rgba(0, 0, 0, 0.4); }
.rd-vs span { padding: 8px 6px 6px; color: #9fb0c2; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.rd-vs b { display: block; font-size: 2.9rem; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: 0; line-height: 1; }
.rd-vs-you b { color: #ffc454; text-shadow: 0 0 14px rgba(255, 196, 84, 0.5); }
.rd-vs-cpu b { color: #ff9db8; text-shadow: 0 0 14px rgba(255, 122, 168, 0.5); }
.rd-vs i { color: #64768a; font-size: 0.9rem; font-style: italic; font-weight: 900; }

/* Match stats */
.rd-stats { width: min(100%, 320px); margin: 0; padding: 0; list-style: none; }
.rd-stats li { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; padding: 3px 4px; color: #e6f5ee; font-size: 0.86rem; font-weight: 650; }
.rd-stats li + li { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.rd-stats b { font-size: 1.02rem; font-weight: 800; }
.rd-stats .rd-lead { color: #ffc454; }

.rd-share { display: flex; gap: 10px; }
.rd-share a { display: grid; place-items: center; min-width: 58px; min-height: 42px; padding: 8px 14px; border-radius: 12px; font-size: 0.9rem; font-weight: 800; text-decoration: none; }
.rd-wa { background: #25d366; box-shadow: 0 4px 0 #128c4b; color: #05321a; }
.rd-x { background: #000; box-shadow: 0 4px 0 #3a4552; color: #fff; }
.rd-record { color: #d6eee3; font-size: 0.86rem; }

.rd-confetti { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.rd-confetti span { position: absolute; top: -40px; width: 30px; opacity: 0; animation: rd-fall linear 2 both; }
.rd-confetti .rd-coins { color: #ffc454; }
.rd-confetti .rd-cups { color: #ff8a80; }
.rd-confetti .rd-swords { color: #9cc4ff; }
.rd-confetti .rd-clubs { color: #a4f2c6; }
@keyframes rd-fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0.85; transform: translateY(760px) rotate(420deg); } }

@media (prefers-reduced-motion: reduce) {
  .rd-taking, .rd-deal, .rd-pop, .rd-plus, .rd-go, .rd-won h2, .rd-lost h2 { animation: none; }
  .rd-confetti { display: none; }
  .rd-stamp { animation-name: none; }
}