/* Spoons styles */
#spoons { background: radial-gradient(circle at 50% 18%, #3a2410 0%, #1b1007 55%, #0e0804 100%); }
#spoons.panic { animation: spPanicBg .35s steps(2) infinite; }
@keyframes spPanicBg { from { background-color: #4a0a0a; } to { background-color: #1b1007; } }
#spoons.panic #spoonsRoot { animation: spShake .18s linear infinite; }
#spoons.booed #spoonsRoot { animation: spShake .09s linear infinite; }
@keyframes spShake { 0% { transform: translate(1px, 1px); } 25% { transform: translate(-2px, 0); } 50% { transform: translate(2px, -1px); } 75% { transform: translate(-1px, 2px); } 100% { transform: translate(1px, -1px); } }

/* Player strip */
.sp-strip { display: flex; gap: 6px; overflow-x: auto; padding: 8px var(--gutter-r) 6px var(--gutter-l); scrollbar-width: none; flex: 0 0 auto; }
.sp-strip::-webkit-scrollbar { display: none; }
.sp-seat { flex: 0 0 auto; min-width: 92px; background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.1); border-radius: 14px; padding: 7px 8px; display: grid; gap: 4px; justify-items: center; text-align: center; font-size: 12px; line-height: 1.2; position: relative; }
.sp-seat b { font-size: 12px; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-seat.me { border-color: var(--brass); }
.sp-seat.live { box-shadow: inset 0 0 0 1px rgba(246,196,83,.35); }
.sp-seat.held { background: rgba(60,160,90,.22); border-color: rgba(120,220,140,.6); }
.sp-seat.out { opacity: .45; }
.sp-seat.off { opacity: .55; filter: grayscale(.6); }
.sp-seat .avatar { width: 32px; height: 32px; font-size: 13px; }
.sp-seat-top { display: flex; align-items: center; gap: 4px; }
.sp-badges { display: flex; gap: 3px; }
.sp-in { background: var(--brass); color: #2a1d05; font-weight: 800; font-size: 11px; border-radius: 999px; min-width: 20px; padding: 2px 5px; }
.sp-seat-foot { color: var(--ink-dim); font-size: 11px; white-space: nowrap; font-weight: 700; }
.sp-tiles { display: inline-flex; gap: 2px; }
.sp-tiles i { font-style: normal; font-weight: 800; font-size: 10px; width: 14px; height: 16px; border-radius: 4px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: rgba(255,255,255,.3); border: 1px solid rgba(255,255,255,.12); }
.sp-tiles i.on { background: var(--bad); color: #fff; border-color: #ff8a8a; }

/* Table */
.sp-table { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 6px var(--gutter-r) 6px var(--gutter-l); }
.sp-spoons { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.sp-spoon { position: relative; width: 64px; height: 64px; border-radius: 50%; border: 3px solid rgba(246,196,83,.6); background: radial-gradient(circle at 35% 30%, #fff3c4, #d9a63c 60%, #8a5f0d); box-shadow: 0 8px 20px rgba(0,0,0,.45), inset 0 -4px 8px rgba(0,0,0,.25); display: grid; place-items: center; padding: 0; cursor: pointer; transition: transform .12s; }
.sp-spoons.n1 .sp-spoon, .sp-spoons.n2 .sp-spoon { width: 78px; height: 78px; }
.sp-spoon:active { transform: scale(.92); }
.sp-spoon-ico { font-size: 36px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.sp-spoons.n1 .sp-spoon-ico, .sp-spoons.n2 .sp-spoon-ico { font-size: 44px; }
.sp-spoon.gone { background: #3b3b3b; border-color: #555; box-shadow: none; cursor: default; }
.sp-spoon.gone .sp-spoon-ico { filter: grayscale(1) brightness(.5); opacity: .5; }
.sp-spoon.decoy { background: radial-gradient(circle at 35% 30%, #ffd1d1, #e03131 60%, #7a0012); border-color: #ff8a8a; }
.sp-spoon-who { position: absolute; right: -6px; bottom: -6px; }
.sp-spoon-who .avatar { width: 28px; height: 28px; font-size: 11px; border: 2px solid #1b1007; }
#spoons.panic .sp-spoon:not(.gone) { animation: spWobble .25s ease-in-out infinite alternate; }
@keyframes spWobble { from { transform: rotate(-14deg) scale(1.05); } to { transform: rotate(14deg) scale(1.05); } }

/* The grab button */
.sp-grab { width: 100%; max-width: 420px; min-height: 118px; border-radius: 26px; border: 0; padding: 10px 16px; font-family: var(--display); font-weight: 700; font-size: 48px; line-height: 1; color: #fff; letter-spacing: .04em; display: grid; gap: 6px; place-items: center; position: relative; overflow: hidden; cursor: pointer; text-shadow: 0 4px 0 rgba(0,0,0,.3); }
.sp-grab small { font-family: var(--body, inherit); font-size: 13px; font-weight: 700; letter-spacing: 0; text-shadow: none; opacity: .9; text-align: center; }
.sp-grab.idle { background: linear-gradient(180deg, #5b4330, #3c2a1b); color: rgba(255,255,255,.55); box-shadow: 0 6px 0 #22160c; }
.sp-grab.ready { background: linear-gradient(180deg, #ffd766, #e0a020); color: #2a1d05; text-shadow: none; box-shadow: 0 8px 0 #8a5f0d, 0 0 30px rgba(246,196,83,.6); animation: spReady .6s ease-in-out infinite alternate; }
.sp-grab.ready small { color: #4a3208; }
@keyframes spReady { from { transform: scale(1); } to { transform: scale(1.04); } }
.sp-grab.scramble { background: linear-gradient(180deg, #ff3b3b, #b3001b); box-shadow: 0 8px 0 #5a000d, 0 0 40px rgba(255,60,60,.7); font-size: 60px; animation: spPanicBtn .2s steps(2) infinite; }
@keyframes spPanicBtn { from { transform: scale(1) rotate(-1deg); } to { transform: scale(1.06) rotate(1deg); } }
.sp-grab.got { background: linear-gradient(180deg, #4caf6e, #1f6f44); box-shadow: 0 6px 0 #0f3b24; font-size: 36px; }
.sp-grab:active:not(:disabled) { transform: translateY(4px); box-shadow: none; }
.sp-grab.greased { background: linear-gradient(180deg, #a8a083, #6e6a52); color: rgba(255,255,255,.6); animation: none; box-shadow: 0 6px 0 #3b3a2c; cursor: not-allowed; }
.sp-smear { position: absolute; inset: 0; display: grid; place-items: center; font-size: 64px; opacity: .85; background: radial-gradient(ellipse at 50% 50%, rgba(255,240,150,.55), rgba(200,180,90,.25) 60%, transparent 80%); pointer-events: none; animation: spSmear 1s ease-in-out infinite alternate; }
@keyframes spSmear { from { transform: translateX(-8px) rotate(-6deg); } to { transform: translateX(8px) rotate(6deg); } }
.sp-timer { width: min(100%, 420px); height: 8px; border-radius: 4px; background: rgba(255,255,255,.15); overflow: hidden; }
.sp-timer i { display: block; height: 100%; background: #ffd766; width: 100%; transform-origin: left; animation: spTimer 3s linear forwards; }
@keyframes spTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.sp-status { color: var(--ink-dim); font-size: 14px; text-align: center; min-height: 20px; line-height: 1.35; width: 100%; }
.sp-status b { color: var(--ink); }
.sp-result { display: grid; gap: 8px; justify-items: center; background: rgba(255,255,255,.07); border-radius: 16px; padding: 12px 14px; width: min(100%, 420px); }
.sp-result p { margin: 0; color: var(--ink); }
.sp-result p.note { color: var(--ink-dim); }

/* Hand */
.sp-hand-area { background: linear-gradient(180deg, rgba(14,8,4,0) 0%, rgba(14,8,4,.95) 30%); }
.sp-hand { display: flex; gap: 10px; align-items: flex-end; padding: 10px 0 2px; }
.sp-slot { display: grid; gap: 5px; justify-items: center; }
.sp-slot.in { flex: 0 0 auto; }
.sp-slot.mine { flex: 1 1 auto; min-width: 0; }
.sp-slot-lab { font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--ink-dim); text-transform: uppercase; display: flex; align-items: center; gap: 4px; }
.sp-slot-lab em { font-style: normal; background: var(--brass); color: #2a1d05; border-radius: 999px; padding: 0 6px; font-size: 10px; }
.sp-slot.in .card { box-shadow: 0 0 0 2.5px var(--brass), 0 4px 10px rgba(0,0,0,.35); }
.sp-slot.in.empty .card { box-shadow: none; }
.sp-empty { background: rgba(255,255,255,.06) !important; border: 1.5px dashed rgba(255,255,255,.25); color: var(--ink-dim); font-size: 20px; }
.sp-cards { display: flex; gap: 6px; justify-content: center; width: 100%; }
.sp-cards.four .card { box-shadow: 0 0 0 2.5px #ffd766, 0 0 18px rgba(246,196,83,.7); }
.sp-hand:not(.can) .card:not(.sp-empty) { filter: brightness(.75); }
.sp-hand.can .card { cursor: pointer; transition: transform .1s; }
.sp-hand.can .card:active { transform: translateY(-6px); }
.sp-tools { min-height: 36px; gap: 6px; }
.sp-tools .note { font-size: 12px; }
.sp-targets { display: grid; gap: 8px; margin-top: 8px; }
.sp-target { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.15); border-radius: 14px; padding: 10px 12px; color: var(--ink); font: inherit; text-align: left; }
.sp-target b { flex: 1; } .sp-target small { color: var(--ink-dim); }

/* Blasts */
.sp-blast { pointer-events: none; background: rgba(255, 40, 40, .55); animation: spBlastIn .25s cubic-bezier(.2, 1.4, .4, 1); }
.sp-blast .tb-text { font-size: clamp(56px, 19vw, 120px); animation: spBlastText .18s steps(2) infinite; }
@keyframes spBlastIn { from { transform: scale(2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes spBlastText { from { transform: scale(1) rotate(-2deg); } to { transform: scale(1.08) rotate(2deg); } }
.sp-result-blast.ok { background: rgba(31, 111, 68, .94); }
.sp-result-blast.bad { background: rgba(179, 0, 27, .94); }
.sp-result-blast.dead { background: rgba(20, 20, 20, .96); }
.sp-result-blast.decoy .tb-from { font-size: 22px; animation: spBlastText .2s steps(2) 8; }
.sp-result-blast .tb-to { font-size: 14px; font-weight: 600; opacity: .9; max-width: 340px; margin: 0 auto; }

/* Boo */
.sp-boo { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30; width: min(88vw, 380px); background: #5a3a0a; color: #fff; border: 3px solid #b88a2a; border-radius: 22px; padding: 18px; text-align: center; display: grid; gap: 6px; justify-items: center; box-shadow: 0 20px 50px rgba(0,0,0,.6); animation: spBooIn .2s ease-out; }
.sp-boo.out { animation: popOut .3s ease-in forwards; }
.sp-boo-ico { font-size: 72px; line-height: 1; animation: spBooWaft 1s ease-in-out infinite alternate; }
.sp-boo-line { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.15; }
.sp-boo small { color: rgba(255,255,255,.75); font-weight: 700; }
@keyframes spBooIn { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes spBooWaft { from { transform: translateX(-10px) rotate(-8deg); } to { transform: translateX(10px) rotate(8deg); } }

@media (max-width: 360px) { .sp-grab { font-size: 40px; min-height: 100px; } .sp-spoon { width: 54px; height: 54px; } .sp-spoon-ico { font-size: 30px; } }