/* Spoons: a dark oak kitchen table, silver spoons in a ring, the waiting cards in front of each player. */
body[data-game="spoons"] #felt {
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(255, 230, 190, .1), transparent 70%),
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 50%, rgba(8, 4, 2, .6) 100%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 .2vmin, transparent .2vmin 15vmin),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.3 .008' numOctaves='3' seed='6'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .08 0 0 0 0 .04 0 0 0 1 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #3a2618, #2b1b10);
}
body[data-game="spoons"] #felt::before { opacity: .08; }
body[data-game="spoons"] #print { display: none; }

#spoons { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2; }
.sp-ring { position: absolute; left: 0; top: 0; }
.spoon {
  position: absolute; left: 0; top: 0; width: calc(var(--v) * 2.6); height: calc(var(--v) * 10.4);
  filter: drop-shadow(0 calc(var(--v) * .6) calc(var(--v) * .6) rgba(0, 0, 0, .55));
  transition: transform .5s cubic-bezier(.2, .9, .3, 1.1);
}
.spoon svg { width: 100%; height: 100%; display: block; }
.sp-piles { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: flex; gap: calc(var(--v) * 1.6); }
.sp-pile { display: flex; flex-direction: column; align-items: center; justify-content: center; width: calc(var(--v) * 6); height: calc(var(--v) * 8.2); border-radius: calc(var(--v) * .6); border: .14vmin dashed rgba(205, 180, 135, .4); color: var(--gold-ink); }
.sp-pile b { font-family: var(--num); font-weight: 400; font-size: calc(var(--v) * 2.8); color: var(--ivory); }
.sp-pile small { font-family: var(--ui); font-size: calc(var(--v) * 1.1); letter-spacing: .2em; text-transform: uppercase; }
.sp-msg { position: absolute; left: 0; top: 0; transform: translate(-50%, calc(var(--v) * 20)); margin: 0; white-space: nowrap; font-family: var(--serif); font-style: italic; font-size: calc(var(--v) * 2.2); color: var(--ivory); }
.sp-msg b { font-style: normal; font-family: var(--display); font-weight: 600; color: var(--champagne-hi); }
.sp-wait { position: absolute; left: 0; top: 0; display: grid; place-items: center; transition: transform .4s; }
.sp-wait .card { grid-area: 1 / 1; }
.sp-wait b { grid-area: 1 / 1; z-index: 5; font-family: var(--num); font-weight: 400; font-size: calc(var(--v) * 2); color: var(--ivory); background: rgba(10, 8, 6, .75); border-radius: 99px; padding: 0 .55em; box-shadow: 0 0 0 .12vmin rgba(205, 180, 135, .5); }

.sp-letters { display: inline-flex; gap: .3em; font-family: var(--display); font-weight: 600; letter-spacing: 0; }
.sp-letters i { font-style: normal; color: rgba(205, 180, 135, .3); }
.sp-letters i.on { color: #e2a59c; }
.sp-letters.out i.on { color: #b9625a; text-decoration: line-through; }

/* ---------- phone ---------- */
body[data-game="spoons"] { background: linear-gradient(180deg, #2f1f14, #140c07); }
.sp-hud { display: inline-flex; gap: 3px; font-family: var(--display) !important; font-size: 26px !important; }
.sp-hud i { font-style: normal; color: rgba(205, 180, 135, .3); }
.sp-hud i.on { color: #e2a59c; }
body[data-game="spoons"] #board { display: flex; justify-content: center; }
.sp-in { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 6px; }
#board .sp-in .card { --cw: min(26vw, 112px); }
.sp-in .card.slide-in { animation: spIn .35s cubic-bezier(.2, .9, .3, 1.1); }
@keyframes spIn { from { transform: translateX(-60vw) rotate(-14deg); opacity: .2; } }
.sp-in p { margin: 0; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--gold-ink); }
.sp-empty { width: min(24vw, 110px); aspect-ratio: 5 / 7; border-radius: 8px; border: 1.5px dashed rgba(205, 180, 135, .35); display: grid; place-items: center; text-align: center; padding: 8px; font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--mute); }
.sp-grab {
  display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; padding: 14px 18px; cursor: pointer;
  border: 0; border-radius: 14px; color: #1a1d22;
  background: linear-gradient(180deg, #f3f5f7, #c9ced5 60%, #a9b0b9);
  box-shadow: inset 0 1px 0 #fff, 0 8px 22px rgba(0, 0, 0, .45);
  font-family: var(--ui); font-size: 16px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.sp-grab svg { width: 18px; height: 60px; transform: rotate(35deg); }
.sp-grab.hot { animation: spHot .7s ease-in-out infinite; box-shadow: 0 0 0 3px var(--champagne), 0 0 30px rgba(227, 207, 159, .7); }
@keyframes spHot { 50% { transform: scale(1.04); } }
.sp-grab:disabled { opacity: .55; animation: none; }