/* Coin art is shared by the picker, table effects, player badge and guide. */
.coin-art { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; pointer-events: none; user-select: none; }
.coin-picker-overlay { display: flex; align-items: center; justify-content: center; padding: 14px; background: #030305e8; backdrop-filter: blur(12px); }
.coin-picker-panel { width: min(480px, 100%); max-height: calc(100dvh - 28px); overflow: auto; padding: 24px; text-align: center; background: radial-gradient(ellipse at 50% 35%, #34101966, transparent 65%), #101013; border: 1px solid #63303a; border-radius: 24px; box-shadow: 0 26px 90px #000c; }
.coin-eyebrow { color: #fa6279; font-size: 9px; font-weight: 800; letter-spacing: .18em; }
#coinTitle { color: #fff; font-size: clamp(22px, 5vw, 30px); margin: 7px 0 5px; line-height: 1.1; }
#coinHelp { color: #b7b3bd; font-size: 12px; margin: 0; line-height: 1.5; }
.coin-picker-stage { position: relative; margin: 0 auto; }
.coin-picker-stage::before { content: ''; position: absolute; left: 3%; right: 3%; top: 52%; height: 42%; border: 1px solid #ffffff0d; border-radius: 50%; background: radial-gradient(ellipse, #4a1b263b, #151519 65%); box-shadow: 0 18px 30px #0005; }
.coin-scene { --coin-size: 160px; height: 240px; position: relative; perspective: 900px; isolation: isolate; }
.coin-flight { position: absolute; top: 32%; left: 50%; margin-left: calc(var(--coin-size) / -2); width: var(--coin-size); height: var(--coin-size); transform-style: preserve-3d; }
.coin-token { position: relative; width: 100%; height: 100%; transform: rotateX(24deg) rotateZ(-12deg); transform-style: preserve-3d; }
.coin-moving .coin-token, .coin-moving .coin-flight { will-change: transform; }
.coin-face, .coin-edge { position: absolute; inset: 0; border-radius: 50%; }
.coin-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.coin-front { transform: translateZ(4px); }
.coin-back { transform: rotateX(180deg) translateZ(4px); }
.coin-edge { display: block; background: repeating-conic-gradient(#ee1831 0deg 3deg, #790915 3deg 6deg); border: 2px solid #b91125; }
.coin-contact-shadow { position: absolute; left: 50%; top: calc(32% + var(--coin-size) * .32); width: calc(var(--coin-size) * 1.15); height: calc(var(--coin-size) * .35); transform: translateX(-50%); border-radius: 50%; background: #000; filter: blur(9px); opacity: .55; }
.coin-impact-ring { position: absolute; left: 50%; top: calc(32% + var(--coin-size) * .5); width: calc(var(--coin-size) * 1.2); height: calc(var(--coin-size) * .4); border: 2px solid #ff8795; border-radius: 50%; transform: translate(-50%, -50%); opacity: 0; }
.coin-landed .coin-face { filter: drop-shadow(0 5px 8px #0008); }
.coin-result { min-height: 21px; margin: 12px 0 14px; color: #a49ca8; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.coin-has-result .coin-result { color: #fff; }
.coin-outcomes { display: grid; gap: 9px; }
.coin-outcome { display: flex; gap: 13px; align-items: center; width: 100%; text-align: left; border: 1px solid #403139; background: #18161b; color: white; border-radius: 13px; padding: 11px 13px; }
.coin-outcome > img { width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; object-fit: contain; }
.coin-outcome > span:nth-child(2) { flex: 1; }
.coin-outcome strong { display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .05em; }
.coin-outcome b { border-radius: 5px; background: #ffffff12; padding: 2px 5px; font-size: 11px; }
.coin-outcome small { display: block; font-size: 11px; line-height: 1.45; color: #c2b9c5; margin-top: 4px; }
.coin-toss-button:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.coin-toss-button:disabled { opacity: .42; cursor: default; }
.coin-toss-button { display: flex; justify-content: center; align-items: center; gap: 12px; width: 100%; margin-top: 13px; padding: 13px; border-radius: 11px; background: #e91b3b; border: 1px solid #fa526a; color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .07em; }
.coin-toss-button:hover:not(:disabled) { background: #fb2546; }
.coin-status { min-height: 16px; margin: 11px 0 0; color: #b7b3bd; font-size: 10px; }
.fab.fab-coin { background: #100c10; border: 0; box-shadow: 0 6px 14px #000a; overflow: visible; }
.fab-coin > .coin-art { position: absolute; inset: 0; }
.fab-coin > .fab-tx { position: absolute; bottom: -9px; z-index: 1; padding: 3px 5px; border: 1px solid #62333d; border-radius: 4px; background: #101013; white-space: nowrap; }
.fab.fab-coin.idle { opacity: .6; box-shadow: 0 6px 14px #000a; }
.fab.fab-coin.armed, .fab.fab-coin.confirm { animation: coin-ready-pulse .8s ease-in-out infinite alternate; }
.fab.fab-coin.used { animation: none; }
.fab.fab-coin.used::after { z-index: 2; }
@keyframes coin-ready-pulse { from { box-shadow: 0 0 0 1px #ff657b60, 0 0 12px #ff254933; } to { box-shadow: 0 0 0 3px #ff657b99, 0 0 23px #ff254977; } }
.coin-pill { width: 22px; height: 22px; padding: 0; overflow: hidden; border: 0; background: #151116; }
.coin-pill.mercy, .coin-pill.nomercy { background: #151116; }
.coin-pill.armed { box-shadow: 0 0 0 1px #fff, 0 0 8px #f43f5e; }
.guide-coin-art { width: 58px; height: 58px; }
.coin-table-effect { position: fixed; z-index: 68; width: 250px; transform: translate(-50%, -50%); pointer-events: none; text-align: center; }
.coin-table-effect .coin-scene { --coin-size: 142px; height: 210px; }
.coin-effect-caption { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 7px; color: #fff; text-shadow: 0 2px 7px #000; }
.coin-effect-caption strong { font-family: 'Black Ops One', sans-serif; font-size: 19px; letter-spacing: .03em; }
.coin-effect-caption span { max-width: 240px; padding: 4px 9px; border: 1px solid #702332; background: #100b0fe8; border-radius: 6px; font-size: 11px; }
.coin-effect-revealed.nomercy .coin-face { filter: drop-shadow(0 0 17px #ef163f80); }
.coin-effect-revealed.mercy .coin-face { filter: drop-shadow(0 0 17px #ffffff50); }
@media (max-width: 480px), (max-height: 750px) {
    .coin-picker-panel { padding: 18px; border-radius: 18px; }
    .coin-picker-panel .coin-scene { --coin-size: 124px; height: 184px; }
    .coin-result { margin: 8px 0 10px; font-size: 10px; }
    .coin-outcome { padding: 9px 10px; gap: 10px; }
    .coin-outcome > img { width: 43px; height: 43px; }
    .coin-outcome small { font-size: 10px; }
    .coin-toss-button { margin-top: 10px; padding: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .fab.fab-coin.armed, .fab.fab-coin.confirm { animation: none; box-shadow: 0 0 0 2px #fa6279; }
    .coin-picker-overlay { backdrop-filter: none; }
}