* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: #1f2937; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  background-color: #f7f7fb;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='80'%3E%3Ctext x='6' y='50' font-family='Comic Sans MS, sans-serif' font-size='30' font-weight='700' fill='%23ffffff' fill-opacity='0.55' transform='rotate(-10 0 50)'%3Edoo doo%3C/text%3E%3C/svg%3E"),
    linear-gradient(160deg, #ffd6ec 0%, #e3c4fb 45%, #c2e9fb 100%);
  background-repeat: repeat, no-repeat;
  background-attachment: fixed, fixed;
  background-size: auto, cover;
}
.floaties { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.floaties span { position: absolute; font-size: 2rem; opacity: 0.5; animation: drift ease-in-out infinite; }
.floaties span:nth-child(1) { left: 6%;  top: 18%; animation-duration: 6s; }
.floaties span:nth-child(2) { left: 88%; top: 22%; animation-duration: 7s; animation-delay: .5s; }
.floaties span:nth-child(3) { left: 12%; top: 70%; animation-duration: 8s; animation-delay: 1s; }
.floaties span:nth-child(4) { left: 80%; top: 66%; animation-duration: 6.5s; animation-delay: .2s; }
.floaties span:nth-child(5) { left: 46%; top: 12%; animation-duration: 7.5s; animation-delay: 1.4s; }
.floaties span:nth-child(6) { left: 30%; top: 85%; animation-duration: 6.8s; animation-delay: .8s; }
.floaties span:nth-child(7) { left: 66%; top: 82%; animation-duration: 7.8s; animation-delay: 1.1s; }
.floaties span:nth-child(8) { left: 94%; top: 48%; animation-duration: 6.2s; animation-delay: .3s; }
@keyframes drift { 0%,100% { transform: translateY(10px) rotate(-4deg); } 50% { transform: translateY(-12px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .floaties span { animation: none; } }

.topbar { width: 100%; max-width: 640px; display: flex; align-items: center; justify-content: space-between; padding: 16px; gap: 12px; }
.topbar h1 { font-size: 1.5rem; }
.back { color: #2563eb; text-decoration: none; font-size: 1rem; }

.screen { width: 100%; max-width: 640px; padding: 20px 16px; text-align: center;
  background: rgba(255, 255, 255, 0.74); border-radius: 22px; margin: 8px 16px 28px;
  box-shadow: 0 12px 34px rgba(80, 40, 120, 0.16);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.screen h2 { margin: 6px 0 14px; font-size: 1.3rem; }
.intro { color: #374151; margin-bottom: 12px; line-height: 1.5; }
.intro.small { color: #6b7280; font-size: .9rem; }
.start { margin-top: 18px; font-size: 1.3rem; padding: 16px 40px; border: none; border-radius: 16px; background: #22c55e; color: #fff; cursor: pointer; }
.start:active { transform: scale(.97); }

/* Opponents row */
.opponents { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.opp { flex: 1 1 0; min-width: 140px; max-width: 280px; padding: 10px;
  border-radius: 16px; background: rgba(255,255,255,.55); transition: box-shadow .2s ease, transform .2s ease; }
.opp.active { box-shadow: 0 0 0 3px #f59e0b, 0 8px 20px rgba(245,158,11,.3); transform: translateY(-2px); }
.opp-name { font-weight: 700; font-size: 1.05rem; margin-bottom: 6px; }
.opp-count { color: #6b7280; font-size: .85rem; margin-top: 6px; }
.opp-hand { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; min-height: 56px; }

/* Cards */
.card { width: 44px; height: 60px; border-radius: 8px; border: none;
  display: flex; align-items: center; justify-content: center; font-size: 1.7rem;
  box-shadow: 0 3px 7px rgba(0,0,0,.16); }
.card.back {
  background: repeating-linear-gradient(45deg, #8b5cf6, #8b5cf6 6px, #7c3aed 6px, #7c3aed 12px);
  color: rgba(255,255,255,.85); font-size: 1.1rem; cursor: default;
}
.card.back.tappable { cursor: pointer; outline: 3px solid #fbbf24; animation: wiggle 1.2s ease-in-out infinite; }
.card.back.tappable:hover, .card.back.tappable:focus-visible { transform: translateY(-5px) scale(1.08); }
.card.face { background: #fff; }
/* A card being picked: lift it out and flip it face-up so the take is easy to follow. */
.card.taken { outline: 3px solid #f59e0b; box-shadow: 0 10px 22px rgba(245,158,11,.4); z-index: 3; transform: translateY(-12px) scale(1.12); transition: transform .3s ease; }
.card.flip { animation: flipreveal .6s ease; }
@keyframes flipreveal { 0% { transform: translateY(-12px) rotateY(0) scale(1.12); } 50% { transform: translateY(-12px) rotateY(90deg) scale(1.12); } 100% { transform: translateY(-12px) rotateY(0) scale(1.12); } }
@keyframes wiggle { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .card.back.tappable { animation: none; } }

/* Status + draw reveal */
.status { min-height: 1.8rem; font-size: 1.25rem; font-weight: 700; color: #4c1d95; margin: 8px 0; }
.draw-zone { min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; margin-bottom: 4px; }
.draw-zone .reveal { font-size: 3.4rem; animation: pop .4s cubic-bezier(.18,1.25,.4,1) both; }
.draw-zone .reveal.poo { animation: pop .4s cubic-bezier(.18,1.25,.4,1) both, shake .5s ease .4s 2; }
.draw-zone .caption { color: #374151; font-size: 1.1rem; font-weight: 600; }
@keyframes pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes shake { 0%,100% { transform: translateX(0) scale(1); } 25% { transform: translateX(-7px) scale(1); } 75% { transform: translateX(7px) scale(1); } }

/* Your hand */
/* Central discard pile — the most recent pair(s) stay visible. */
.discard-wrap { text-align: center; margin: 4px 0 10px; }
.discard-label { font-size: .8rem; color: #6b7280; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 5px; }
.discard { min-height: 56px; display: flex; gap: 16px; justify-content: center; align-items: center;
  background: rgba(255,255,255,.45); border-radius: 14px; padding: 8px 14px; max-width: 320px; margin: 0 auto; }
.discard-empty { color: #9ca3af; font-size: .9rem; }
.discard-pair { display: flex; animation: pop .35s cubic-bezier(.18,1.25,.4,1) both; }
.card.mini { width: 34px; height: 46px; font-size: 1.3rem; box-shadow: 0 2px 6px rgba(0,0,0,.16); }
.discard-pair .card.mini:nth-child(2) { margin-left: -14px; transform: rotate(9deg); }

.you { margin-top: 6px; }
.you-label { font-weight: 700; margin-bottom: 8px; font-size: 1.05rem; }
.your-hand { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; min-height: 68px; }
.your-hand .card.face { width: 54px; height: 74px; font-size: 2.2rem; }
.your-hand .card.slide-in { animation: slidein .5s cubic-bezier(.18,1.25,.4,1) both; }
.your-hand .card.matching { outline: 3px solid #22c55e; animation: glow .5s ease infinite alternate; }
@keyframes slidein { from { opacity: 0; transform: translateY(34px) scale(.5); } to { opacity: 1; transform: none; } }
@keyframes glow { from { box-shadow: 0 0 2px rgba(34,197,94,.4); } to { box-shadow: 0 0 20px 4px rgba(34,197,94,.9); } }

/* A card flying between places (drawn card, matched pair). */
.fly-card { position: fixed; z-index: 90; display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 10px; font-size: 2rem; box-shadow: 0 8px 22px rgba(0,0,0,.28);
  pointer-events: none; will-change: left, top, width, height, transform; }
.fly-card.big { transform: scale(1.9); box-shadow: 0 16px 40px rgba(0,0,0,.34); z-index: 91; }
.fly-card.wobble { animation: wobble .5s ease 2; }
@keyframes wobble { 0%,100% { transform: scale(1.9) rotate(0); } 25% { transform: scale(1.9) rotate(-9deg); } 75% { transform: scale(1.9) rotate(9deg); } }

/* Result modal (shared pattern with the other games) */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 60; }
.modal-card { background: #fff; border-radius: 20px; padding: 24px; max-width: 360px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.result-img { width: 100%; max-height: 240px; object-fit: cover; border-radius: 14px; }
.result-msg { font-size: 1.5rem; font-weight: 700; margin: 14px 0 6px; }
.result-answer { color: #6b7280; margin-bottom: 14px; }
.modal-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.confetti { position: fixed; top: -20px; font-size: 1.4rem; pointer-events: none; animation: fall 2.2s linear forwards; z-index: 70; }
@keyframes fall { to { transform: translateY(100vh) rotate(360deg); opacity: 0; } }